CSS3 动画解析

一.Animation 动画

1. 含义

CSS3 的 animation 是经过关键帧的形式作出来的。使用时常结合 transform 属性进行制做。

2.animation 语法

animation 属性是一个简写属性，用于设置下方六个动画属性；

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	描述
name	须要绑定到选择器 keyframes 的名称
duration	规定须要完成动画的时间
timing-function	规定动画的速度曲线
delay	规定动画开始前的延迟时间
iteration-count	规定动画应该执行的次数
direction	规定是否轮流方向播放动画
fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state	指定动画是否正在运行或已暂停

接下来将分析每一个属性的取值：

1. timing-function 属性

值	描述
linear	动画从头至尾的速度是一致的
ease	默认，开始时慢，慢慢加速，结束前减速
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中本身的值。可能的值是从 0 到 1 的数值。

2.iteration-count

值	描述
<number>	动画播放次数为 n,能够为小数
infinite	动画播放循环

3.direction

值	描述
normal	默认，动画正常播放
alternate	动画在奇数次（一、三、5...）正向播放，在偶数次（二、四、6...）反向播放。
reverse	反向播放
alternate-reverse	动画在奇数次（一、三、5...）反向播放，在偶数次（二、四、6...）正向播放。

4.fill-mode

值	描述
none	默认值，动画在动画执行以前和以后都不会运用任何样式到目标元素上
forwards	目标保持动画最后一帧的样式，最后一帧是哪一个取决于animation-direction和 animation-iteration-count
backwards	动画采用相应第一帧的样式，保持 animation-delay
both	动画将会执行 forwards 和 backwards 执行的动做

5.play-state

值	描述
running	当前动画正在运行
paused	当前动画已被中止

3.补充 transform 的属性

具体属性能够参考 www.w3school.com.cn/cssref/pr_t…

4.实战

该实例实现绕圈动画

• html 代码

<div class="mainBox">
    <div class="sun">
        <img src="../image/1.jpg">
    </div>
    <div class="earth">
        <img src="../image/1.jpg">
    </div>
</div>
复制代码

• CSS 代码

.mainBox {
    position: relative;
    width: 600px;
    height: 600px;
}

.sun {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 250px;
}

.mainBox img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.earth {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 450px;
    transform-origin: -150px 50px;
    animation: rotate 5s linear forwards;
}

@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}
复制代码

• 效果

结合 clip-path 作动画

介绍clip-path 是用来裁剪的，如对一个 div 应用 clip-path:circle(40% at 50% 50%),意为裁剪一个半径为 40%，圆心在(50%，50%) 位置的一个圆；使用 clip-circle 可用来作一些形状变化的动画

clip-path 实战

• html 代码

<div class="imgBox">
    <img src="../image/1.jpg">
</div>
复制代码

• CSS 代码

.imgBox img {
    clip-path: circle(10% at 50% 50%);
    transition: clip-path 8s ease-in-out;
}

.imgBox img:hover {
    clip-path: circle(40% at 50% 50%)
}
复制代码

• 效果

效果本文参考李银城的书籍《高效前端》欢迎你们留言探讨~