1. transition
    1. transition-property
    2. transition-timing-function
    3. transition-delay
  2. animation
    1. @keyframes
    2. animation
    3. animation-timing-function
    4. animation-iteration-count
    5. animation-delay
    6. animation-direction
    7. animation-fill-mode
    8. animation-play-state
  3. 常用动画
    1. 搜索栏变宽
  4. animate.css
    1. 载入动画库
    2. 添加动画
  5. 参考

CSS动画

transition

transition: property duration timing-function delay,property2...;

1
2
//宽度 变化时间1s,背景颜色 变化时间0.5s 匀速变化 延迟1s执行
transition: width 1s,background 0.5s linear 1s;

transition用于设置元素样式改变时的过渡动画效果,是以下4项属性的简写

  • transition-property 属性名
  • transition-duration 过渡时间
  • transition-timing-function 过渡曲线
  • transition-delay 延迟

transition-property

指定过渡效果适用于哪些CSS属性名
不设置transition-property,则默认给所有样式变化加上动画过渡效果

1
2
3
4
5
<style>
.c-3 {width: 150px; transition-property: width; transition: 0.4s;}
.c-3:focus{width: 300px;}
</style>
<input class="c-3"></input>

transition-timing-function

定义动画过渡曲线,接收以下值

  • linear 匀速
  • ease 慢-快-慢(默认值)
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 慢进慢出
  • cubic-beier 自定义 cubic-bezier.com

transition-delay

设置过渡动画的延迟时间

延迟0.5s

animation

animation可以让元素从一种样式逐渐过渡到另一种样式

为了创建动画,需要先在@keyFrames规则中指定动画样式,然后将其绑定到元素上

@keyframes

@keyframes有两种格式

@keyframes *animationName*{
    from {}
    to{}
}

百分比格式可以更好的细分动画的过渡效果

@keyframes *animationName*{
    0% {}
    100% {}
}

背景颜色切换

body{
    animation: changeColor 10s normal;
}
@keyframes  changeColor {
    from {background: blue};
    to {background: yellow}
}

animation

animation: keyframes-name duration timing-function delay count direction fill-mode;

animation animation是以下属性的简写:

  • animation-name 动画名
  • animation-duration 执行时间
  • animation-timing-function 速度曲线
  • animation-delay 延迟时间
  • animation-iteration-count 播放次数
  • animation-direction 否逆序播放
  • animation-fill-mode 动画结束后的状态

animation-timing-function

控制动画过渡的速度曲线,类似transition-timing-function
animation-timing-function: linear | ease | ease-in| ease-out | cubic-bezier(n, n, n, n) | step(n, start|end) | step-start | step - end

注 step-start和step-end应用于拥有多个关键帧的动画
关于steps|step-start|step-end的详细描述 见CSS3 animation属性中的steps功能符深入介绍

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier
steps(5, start)
steps(5, end)
step-start
step-end

animation-iteration-count

设置动画的播放次数

  • infinite 无限次
  • number 按次数播放
播放3次
animation: changeColor 2s 3;
永远播放
animation: changeColor 2s infinite;

animation-delay

设置动画延迟播放的时间

延迟5s播放
animation: changeColor 2s linear 5s infinite;

animation-direction

设置动画向前/向后/轮流播放

  • normal(默认值)
  • reverse 反向播放
  • alternate 先正向播放,然后反向播放,交替运行
  • alternate-reverse 先反向播放,然后正向播放,交替运行
normal
reverse
alternate
alternate-reverse

animation-fill-mode

设置如何显示动画执行前/后的样式

  • none(默认值)
  • forwards 动画结束后,显示动画的最后一帧
  • backwards 动画开始前,显示动画的第一帧
  • both 相当于同时设置了forwards和backwards

关于animation-fill-mode的详细描述,见你所不知道的animation-fill-mode细节
下列3个方块的原始/动画开始/动画结束背景颜色分别为红/黄/绿,动画开始前均有2s延迟

none
forwards
backwards
both

animation-play-state

播放/暂停动画

  • running 播放
  • paused 暂停

注意:如果动画播放完毕,则无法通过设置animation-play-state重新播放
正确的做法是通过移除class再添加来重放动画
而且添加class不能直接写在remove后边,要套个setTimeout才有效,不知道为什么

    ele.classList.remove("name");
    //写在这里是无效的,动画不会播放
    //ele.classList.add("fill-demo");
    setTimeout((function(){
        ele.classList.add("name");
    }, 0);

常用动画

搜索栏变宽

inputBox {
    transition: 0.5s ease-in;
    width: 100px;
}
:focus {
    width:400px;
}

animate.css

animate是一个跨浏览器CSS动画库,支持多种效果
下载地址

载入动画库

animate和普通外部css一样,可以用link标签直接载入.

或使用外部cdn载入

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

添加动画

在元素的class中加入 "animated"和动画名,也可使用"infinite"让动画一直播放

<div class="animated bounce">bounce</div>
<div class="animated infinite bounce">bounce</div>
bounce
flash
bounceInUp
tada

可用以下属性更改动画的持续时间/延迟/播放次数
-vendor-animation-duration //单次动画持续时间
-vendor-animation-delay // 延迟时间
-vendor-animation-iteration-count //播放次数
注意 vendor需换成浏览器前缀,如 webkit, moz, etc

-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
//一直播放
-webkit-animation-iteration-count: infinite;
//播放5次
-webkit-animation-iteration-count: 5;
//测试了chrome,其实不写前缀也能用
animation-iteration-count: 5;

更多效果见官方页面

参考

你所不知道的animation-fill-mode细节
CSS3 animation属性中的steps功能符深入介绍