CSS动画样式

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");







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