码迷,mamicode.com
首页 > Web开发 > 详细

CSS动画样式

时间:2018-01-16 23:54:08      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:tran   name   obj   translate   body   ota   post   attribute   attr   

transform:对对象属性进行动画编辑(可用于有渐变效果的动画)

一、transition:动画的过度效果

注:始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition的属性值及其用法:

1.transition-property  规定设置过渡效果的 CSS 属性的名称。

2.transition-duration  规定动画过度需要的时间

3.transition-timing-function  动画的过度曲线

注:linear:用于相同速度开始至结束的过渡效果

4.transition-delay  动画何时开始

二、translate:动画的平移效果

属性值可加X Y Z 点的坐标

transform:translateX(50px)     //向右平移50px

三、scale:动画的旋转

transform:rotate(9deg)   //旋转9度

具体事例

用transform设置图片的缓慢进入

 var  obj=documen.getElementByClassName("classname")[0];

   obj.setAttribute("class",obj.getAttribute("class")+" classname2");

 

 







CSS动画样式

标签:tran   name   obj   translate   body   ota   post   attribute   attr   

原文地址:https://www.cnblogs.com/diverman/p/8298254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!