- transition实现简单的过渡动画
- @keyframes实现更详细的动画
- WAAPI实现动画
使用transiton来创建动画
语法:
transition: css-property duration timing-function delay
每个属性的意思和使用@keyframes中的讲解是一样的。
举个例子
-webkit-transiton: background 2s linear 2s,
border-radius 3s ease-in 4s;
transiton: background 2s linear 2s,
border-radius 3s ease-in 4s;
当然了,可以不一个一个的指定需要过渡的属性,直接用all来代替
transition: all 2s;
如果你是用all来代替的,那还可以写的更简单些,就像下面这样的
transition: 2s;
因为 transition: css-property duration timing-function delay
中,除了duration没有默认值外,其他的都有默认值。
css-property:默认值all
timing-function:默认值ease
delay:默认值0
而且这些属性是没有顺序限制的,可以随便写,就像这样的。
transition: ease-out 2s width;
但是如果同时制定了duration和delay两个时间,那么前面的一个时间代表的是动画持续时间duration,后面的一个时间是延迟时间delay。
使用@keyframes来创建动画
语法:@keyframes identify{}
由于目前已经得到了各大浏览器很好的支持,所以对于移动端的开发可以无需添加浏览器前缀
如果你非要添加前缀,应该是这样的
@-webkit-keyframes identify{},
@-moz-keyframes identify{}
看个简单的例子
@keyframes show{
0%{
-webkit-transform: translate3d(-1120px, 0, 0);
transform: translate3d(-