CSS3动画的一些小总结

作者: 瑶一瑶日期: 2016-03-22

183321

总结的内容有的是一些平时自己遇到过的容易被忽略的，有的是个人觉得简单实用的，特此分享！

1、过渡

简单的状态变化只用transition就可以方便地实现：

transition-property： 规定应用过渡的 CSS 属性的名称；
transition-duration：定义过渡效果花费的时间，默认是 0；
transition-timing-function ： 规定过渡效果的时间曲线。
transition-delay： 规定过渡效果何时开始，默认是 0

在用的时候遇到一个问题，就是transition在动画退场时会有退场动画，相当于强制加上了反向播放，可是我并不想要这个反向播放，这时候就加上一个transition:none就好了，之后再用到动画的时候再给它加上transition。下图中的黄色框框的交互就是这样实现的。链接在此
请输入图片描述

2、多个动画效果的叠加

有时候动画可能不是一个keyframes可以实现的，比如一个先淡入淡出，再无限上下浮动的效果，就需要将动画分解，写两个keyframes动画帧：

.keyframes(fadeIn,{……});
.keyframes(float,{……});
.element{animation:fadeIn 1s,float 0.5s 1s infinate;}//先执行第一个1s后执行第二个，完美

另一个实现方法：标签嵌套，动画独立

<div class="element_wrap"><div class="element"></div></div>
    .keyframes(fadeIn,{……});
    .keyframes(float,{……});
    .element_wrap{animation:fadeIn 1s;}
    .element{animation:float 0.5s 1s infinate;}

可能你要问为什么要这么写呢，明明上面这样的写法可以少写两行代码，可是有时候会有以下的情况：

同一个父元素中多个子元素都有不同的动画要执行，它们的前半节动画都是淡出，后面的半节有的上下浮动，有的左右浮动，有的旋转……

//如果用上面一种方法来写，就是
.element1{aimation:fadeIn 1s,float 0.5s 1s infinite;}
.element2{aimation:fadeIn 1s,floatLeft 0.5s 1s infinite;}
.element3{aimation:fadeIn 1s,rotate 0.5s 1s infinite;}
 
//公用的动画不能统一维护，不如把公用部分放在父元素中
.element_wrap { animation: fadeIn 1s; }/* 大家都1秒淡出 */
.element1 { animation: float .5s 1s infinite; } 
.element2 { animation: size .5s 1s infinite; }  
.element3 { animation: move .5s 1s infinite; } 

在用到transform的时候避免冲突，如果要实现一边旋转一边浮动的效果（如果不太复杂可以用transform:rotate... scale...)叠加的写法）

.keyframes(rotate,{transform(rotate(...))});
.keyframes(float,{transform(translate(...))});
 
 .element{animation:rotate 1s float 1s;}    //前面的旋转会被后面的浮动覆盖掉
// 这个时候就可以这样写：
.element_wrap{animation:rotate 1s;}
.element{animation:float 1s;}

3、不用动画去做定位

之前老是爱偷懒，爱用fill-mode属性去决定动画的起始位置，移动用用也就算了，一时用得高兴，在PC端也用。之后看了下IE，整个人都不好了。但是这样的写法有时候会带来一些不方便，比如：

@keyframes spin-trans {
    0% { transform: rotate(0)}
    100% { transform: rotate(360deg) }
}
.element{
    transform:translate(50px,50px);//这里的transform会被rotate动画里面的transform效果覆盖
    animation:rotate 1s;//是的没错，就是我覆盖的
}
//机智如我，马上又改成了另一种写法
@keyframes spin-trans {
    0% { transform: rotate(0) translate(50px,50px);}
    100% { transform: rotate(360deg) translate(50px,50px);}
}
.element{   
    animation:rotate 1s forwards;
}