css animation学习

css animation学习

上一篇写了transition的用法，其实animation也是做动画利器，相比于transition，animation可以做出更多更大的动画效果

今天就来学一下css的animation的用法

用法

如下所示animation属性可以有8个值，当然这8个值可以分开写

.someclass {
    /*[animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]*/
    animation: myanimation 4s ease 1s infinite reverse forwards paused;
}

等价于

.someclass {
    animation-name:myanimation;
    animation-duration:4s;
    animation-timing-function:ease;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-direction:reverse;
    animation-fill-mode:forwards;
    animation-play-state:paused;
}

在实际项目中，大多数情况是不需要这么多属性的

下面简单解释一下这些属性的意思

• animation-name：动画的名字。用法如下，我们定义了一个动画名字叫myanimation，其实他就是一个状态集合，它的起始状态为from，结束状态为to，意思是从left:0 移动到 left:200px 的位置。

@keyframes myanimation{
	from {left:0;}
	to {left:200px;}
}

• animation-duration:动画持续的时间。

• animation-timing-function：这个和transition-timing-function用法是一样的，css定义了一些默认值

  值	贝塞尔曲线函数
  linear	cubic-bezier(0,0,1,1)
  ease	cubic-bezier(0.25,0.1,0.25,1)
  ease-in	cubic-bezier(0.42,0,1,1)
  ease-out	cubic-bezier(0,0,0.58,1)
  ease-in-out	cubic-bezier(0.42,0,0.58,1)

• animation-delay：animation的延迟时间。比如1s，那么1s后开始animation。

• animation-iteration-count：这个属性是指你的动画持续多久，它可以为一个数字，代表播放指定次数的动画，也可以为infinite代表播放无限次的动画。

• animation-direction：这个是运动的方向，以下是几个常用取值

  值	含义
  normal	默认值，动画按正常顺序播放
  reverse	动画按反向顺序播放
  alternate	动画按先正向再反向播放
  alternate-reverse	动画按先反向再正向播放

• animation-fill-mode: 这个属性很有意思，且很有用，后面会用实例来说明，以下是常用取值

  值	含义
  none	默认值，动画执行前后的css为其自身的css
  forwards	将动画结束时的css应用在动画元素上
  backwards	将动画开始时的css应用在动画元素上
  both	综合forwards和backwards的效果

• animation-play-state：两个取值running（默认值）和paused，分别代表播放和暂停动画，这个属性一般用的很少。

实例展示

好了说了这么多，下面开始实例展示

实例查看

这次做了一个animation实例的小例子
可以选择条件查看相应的动画效果展示

这里着重说一说animation-fill-mode这个属性

• none

.box{
    animation:myanimation 1s ease-in-out 0s 1 normal forwards;
}

如果你设置的animation-fill-mode是none，那么动画结束后蓝色的小框框会回到起点

• forwards

/*动画效果*/
@keyframes myanimation {
    from {
        left: 0;
        background: orangered;
    }
    to {
        left: 300px;
        background: green;
    }
}

.box{
    animation:myanimation 1s ease-in-out 0s 1 normal forwards;
}

如果你设置的animation-fill-mode是forwards，那么动画结束后蓝色的小框框会停在在终点

• backwords

.box{
    animation:myanimation 1s ease-in-out 2s 1 normal backwards;
}

这里把animation-delay设置长一点，就能看到它和none的区别了，

backwards的动画效果是这样的，颜色变成开始状态(from)-等待两秒-终止状态(to)-回起点(from)

如果是none那么动画的效果是这样的，等待两秒-颜色变成开始状态(from)颜色-终止状态(to)-回起点(from)

注意体会二者的区别，在实例展示页面好好体会一下就明白了。

• both

如果你设置的animation-fill-mode是both，那么它会综合forwards和backwords两种效果

• 兼容性

如果要兼容老浏览器，需要加前缀，如果觉得加prefix麻烦，那么你可以看看这个 autoprefixer，有了这个工具，你可以写不带前缀的css，如果检测到浏览器不支持，它会自动帮你加上相应的前缀，真是很方便，实战项目很有用，当然如果你不喜欢添加第三方库那就另说了。

.box{
    -webkit-animation:myanimation 1s ease-in-out;
    -moz-animation:myanimation 1s ease-in-out;forwards;
    -o-animation:myanimation 1s ease-in-out;forwards;
    animation:myanimation 1s ease-in-out;
}

@-webkit-keyframes myanimation {
    from {
        left: 0;
        background: orangered;
    }
    to {
        left: 300px;
        background: green;
    }
}
@-moz-keyframes myanimation {
    from {
        left: 0;
        background: orangered;
    }
    to {
        left: 300px;
        background: green;
    }
}
@-o-keyframes myanimation {
    from {
        left: 0;
        background: orangered;
    }
    to {
        left: 300px;
        background: green;
    }
}
@keyframes myanimation {
    from {
        left: 0;
        background: orangered;
    }
    to {
        left: 300px;
        background: green;
    }
}

写作时间：2020-05-22