CSS3过渡动画

1 过渡

1.1 基本形式

transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。

之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。

过渡：从开始状态到结束状态的中间过程可以查看

格式：

transition:过渡的属性 完成时间(s) 运动曲线 延迟时间

transition:all 3s(1s=1000ms) linear 0s;

transition 包含以下四个属性：

• transition-property 过渡属性。如果希望所有的属性都发⽣过渡，就使⽤all

• transition-duration 过渡的持续时间，单位是s或者ms

• transition-timing-function 运动曲线。属性值取值：

  • ease 慢速开始，然后变快，然后慢速结束的过渡效果（默认 cubic-bezier(0.25,0.1,0.25,1)）

  • linear 线性，以相同速度开始至结束的过渡效果（cubic-bezier(0,0,1,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)）

  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，https://cubic-bezier.com/

• transition-delay 默认是0，单位为s，过渡延迟。多⻓时间后再执⾏这个过渡动画。

transition-duration 这个属性需要首先设置，否则时长为 0，就不会产生过渡效果。

注意：transition-property 这个属性是尤其需要注意的，不同的属性值有不同的现象。如果设置 transition-property:width，意思是只让盒⼦的宽度在变化时进⾏过渡。如果设置 transition-property:all，意思是让盒⼦的所有属性（包括宽度、背景⾊等）在变化时都进⾏过渡。

<style>
    .box {
        width: 100px;
        height: 100px;
        background: #0000ff;
        transition: width 2s linear 0s;
    }
​
    .box:hover {
        width: 300px;
    }
</style>
<div class="box"></div>

1.2 可以设置过渡的属性

数值型的属性可以参与过渡。

⽐如：width、height、font-size。

常⽤：background-color background-position 因为颜⾊本身也可以使⽤数值表示，所以也可以参与过渡。

<style>
    .box {
        width: 100px;
        height: 100px;
        background: #0000ff;
        transition: background 1s linear 0s;
    }
​
    .box:hover {
        background: #ff0000;
    }
</style>
<div class="box"></div>

2 动画

• 通过 @keyframes 定义动画

• 在指定元素⾥，通过 animation 属性调⽤动画

2.1 定义动画

@keyframes 定义动画关键帧，写法：

• 百分比 0% 是动画的开始时间，100% 动画的结束时间

• 关键词 "from" 和 "to"，等价于 0% 和 100%

/* 动画名不要使⽤ none 这样的关键字 */ 
@keyframes 动画名{
    from{ 初始帧 } 
    to{ 结束帧 } 
}
​
@keyframes mymove
{
    0% {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

2.2 调用动画

animation 属性的用法：

• animation: 定义的动画名称 动画完成时间(从开始帧到结束帧⼀次动画完成的时间) 运动曲线 延迟执⾏ 执⾏次数(infinite 表示⽆限次) 是否反向

• animation-name 定义的动画名称（必填）

• animation-duration 多长时间才能完成动画（必填）

• animation-timing-function 动画的速度曲线

  • ease 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

  • linear 规定从开始到结束的速度相同的动画

  • ease-in 规定慢速开始的动画

  • ease-out 规定慢速结束的动画

  • ease-in-out 指定开始和结束较慢的动画

  • cubic-bezier(n,n,n,n) 运行您在三次贝塞尔函数中定义自己的值

• animation-delay 动画开始的延迟时间，负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒

  • 可以通过帧控制，实现延迟。但每次动画都会有延迟，animation-delay 只体现在第⼀次动画开始时

• animation-iteration-count 设置动画应运行多少次

• animation-direction 向前播放、向后播放还是交替播放动画

  • normal 动画正常播放（向前 默认值）

  • reverse 动画以反方向播放（向后）

  • alternate 动画先向前播放，然后向后

  • alternate-reverse 动画先向后播放，然后向前

  • alternate 也会计算执⾏次数

• animation: myfirst 5s linear 0s infinite alternate;

• animation-fill-mode 动画开始结束时盒⼦的状态

  • none (默认值) 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后⽣效

  • forwards 在运动结束的之后，停到结束位置

  • backwards 在延迟的情况下，让 0% 在延迟前⽣效

  • both backwards和forwards同时⽣效

• animation-play-state 设置动画正在运行还是暂停

  • paused 动画已暂停

  • running 动画正在播放

<style>
    @keyframes myfirst {
        0% {
            background-color: red;
            left: 0px;
            top: 0px;
        }
        25% {
            background-color: yellow;
            left: 200px;
            top: 0px;
        }
        50% {
            background-color: blue;
            left: 200px;
            top: 200px;
        }
        /* 如果有共同的样式，可以组合写。*/
        30%,
        60% {
            border-radius: 50px;
        }
        75% {
            background-color: green;
            left: 0px;
            top: 200px;
        }
        100% {
            background-color: red;
            left: 0px;
            top: 0px;
        }
    }
​
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: myfirst 5s linear 0s infinite alternate;
        animation-play-state:running ;
    }
</style>
<div class="box"></div>

如果不设置开始帧或结束帧，浏览器会使⽤元素的默认属性作为开始帧或结束帧。如果使⽤延迟，就是动画中的某⼀点。

小球滚动

<style>
    @keyframes myfirst {
        0% {
            left: 0;
        }
        100% {
            left: 200px;
        }
    }
​
    .box {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: red;
        position: relative;
        animation: myfirst 1s linear 0s infinite;
    }
</style>
<div class="box"></div>

心跳

<style>
    @keyframes bounce {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
​
    .heart {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 80px 100px 0;
        animation: bounce 1s linear 0s infinite alternate;
    }
​
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
    }
​
    .heart:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }
</style>
<div class="heart"></div>

弹跳的小球

<style>
    @keyframes myfirst {
        0% {
            top: 0;
        }
        100% {
            top: 200px;
        }
    }
​
    .box {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: red;
        position: relative;
        animation: myfirst 1s linear 0s infinite alternate;
    }
</style>
<div class="box"></div>

2.3 多个动画使用

格式：animation-name:动画1,动画2,动画3;

/* 若只有⼀个字，三个动画会使⽤同⼀时间。若有两个值，第三个动画会从头开始取值。*/
animation-duration:4s,2s;

2.4 层叠属性对动画的影响

多个动画定义了属性重叠，后⾯的优先级会⾼于前⾯的优先级。等后⾯的动画执⾏完后，若前⾯的动画还未执⾏完，才会交给前⾯的动画执⾏。

不是所有的属性都可以设置动画的，⼀般来说有数值，有中间值的属性才可以设置动画。

2.5 steps

表示动画不是连续执⾏，⽽是间断地分成⼏步执⾏

选项：

• steps(n,start) 设置n个时间点，第⼀时间点变化状态

• steps(n,end) 设置n个时间点，第⼀时间点初始状态

• step-start 等于steps(1,start)，可以理解为从下⼀步开始

• step-end 等于steps(1,end)，可以理解为从当前步开始

<style>
    @keyframes myfirst {
        0% {
            top: 0;
        }
        100% {
            top: 200px;
        }
    }
​
    .box {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: red;
        position: relative;
        animation: myfirst 1s steps(4, end) 0s infinite alternate;
    }
</style>
<div class="box"></div>