css3 的动画让 html 页面变得生机勃勃，但是如何用好动画是一门艺术，接下来我来以一个demo为例，来练习css3 animation。
我们先详细了解一下animation 这个属性。
animation-name
这是一个必填的选项，否则无法指定要执行哪一个动画。
animation-duration
属性定义动画完成一个周期所需要的时间，以秒或毫秒计，如果不写的话，动画将无法执行。
animation-timing-function
动画速度曲线（默认ease），这个属性稍微复杂一些，它规定了这个动画在哪个时间执行的快，那个时间执行的慢。属性定义了一些常用的速度曲线，下面是一些例子：
linear // 动画从头到尾的速度是相同的
ease // 动画以低速开始，然后加快，在结束前变慢
ease-in // 动画以低速开始
ease-out // 动画以低速结束
ease-in-out // 动画以低速开始和结束
cubic-bezier(n,n,n,n) // cubic-bezier 是二阶贝塞尔曲线，4个值都在[0,1]之间取，前两个值组成一个点，后两个值组成一个点。
animation-delay
规定在动画开始之前的延迟时间（默认0），同样以秒或毫秒计。
animation-iteration-count
动画播放次数（默认1），可以是任意正整数或者无限次数 infinite。
animation-direction
动画是否方向播放（默认normal）
normal // 每个动画周期正向播放
reverse // 每个动画周期反向播放
alternate // 奇数周期正向播放，偶数周期方向播放
alternate-reverse // 偶数周期方向播放，奇数周期正向播放animation
animation 是animation动画的简写，可以将以上6个属性写在一起。既：
animation: name duration timing-function delay iteration-count direction;我们将animation基础知识复习了一遍，接下来我们用一个小例子感受一下animation 的魅力。我们先看一下这个 animation-demo。这个demo主要有四处用到了 animation动画。
第一处是当横屏时 ( window.innerHeight < window.innerWidth ) 出现竖屏提示
这里运用动画的有三处，第一个是手机的旋转，第二个和第三个是对号错号的缩放。下面上代码
html部分
<div class="phone">
<img src="img/phone.png"/>
<i class="yes"></i>
<i class="no"></i>
</div>css部分
.phone {position: absolute;left: 50%;top: 100px;transform: translateX(-50%)}
.phone img {position: relative;animation: rotate_phone 5s ease-in-out infinite}
.phone .yes {position: absolute;left: 50%;top: 50%;display: inline-block;width: 40px;height: 30px;
background-image: url("../img/yes.png");animation: scale_yes 5s ease infinite}
.phone .no {position: absolute;left: 50%;top: 50%;display: inline-block;width: 40px;height: 30px;
background-image: url("../img/no.png");animation: scale_no 5s ease infinite}
@keyframes rotate_phone {
0% {transform: rotate(0deg)}
15% {transform: rotate(0deg)}
35% {transform: rotate(-90deg)}
65% {transform: rotate(-90deg)}
85% {transform: rotate(0deg)}
100% {transform: rotate(0deg)}
}
@keyframes scale_yes {
0% {transform: translate(-50%,-50%) scale(1);}
22% {transform: translate(-50%,-50%) scale(1);}
24% {transform: translate(-50%,-50%) scale(0);}
52% {transform: translate(-50%,-50%) scale(0);}
80% {transform: translate(-50%,-50%) scale(0);}
82% {transform: translate(-50%,-50%) scale(1.3);}
84% {transform: translate(-50%,-50%) scale(0.8);}
86% {transform: translate(-50%,-50%) scale(1.1);}
88% {transform: translate(-50%,-50%) scale(0.9);}
90% {transform: translate(-50%,-50%) scale(1);}
100% {transform: translate(-50%,-50%) scale(1);}
}
@keyframes scale_no {
0% {transform: translate(-50%,-50%) scale(0);}
30% {transform: translate(-50%,-50%) scale(0);}
32% {transform: translate(-50%,-50%) scale(1.3);}
34% {transform: translate(-50%,-50%) scale(0.8);}
36% {transform: translate(-50%,-50%) scale(1.1);}
38% {transform: translate(-50%,-50%) scale(0.9);}
40% {transform: translate(-50%,-50%) scale(1);}
72% {transform: translate(-50%,-50%) scale(1);}
74% {transform: translate(-50%,-50%) scale(0);}
100% {transform: translate(-50%,-50%) scale(0);}
}
这段代码的精髓所在就是如何协调配合好这三个动画。那么怎么协调呢？先拿手机旋转来说，我设置的动画运动的时间比上总时间为2:5，即在100%中，有60%的时间是不动的，这样一来我们可以分配30%的时间在竖着的手机动画上，30%的时间在横着的手机动画上。我的思路首先会想到下面这样的代码：
0% {transform: rotate(0deg)}
50% {transform: rotate(-90deg)}
100% {transform: rotate(0deg)}然后分析50%的时候是横屏（rotate: -90deg），横屏时间占30%，分别向左右各延伸15%，即35%~65%，在循环动画中0%其实就是100%，都可以看作是竖屏（rotate: 0deg）的时间中心，因此竖屏时间范围从0%~15%和85%~100%。所以得到 rotate_phone 动画。接下来我们以错号（scale_no）的缩放动画为例作分析，
0% {transform: translate(-50%,-50%) scale(0);}
30% {transform: translate(-50%,-50%) scale(0);}
32% {transform: translate(-50%,-50%) scale(1.3);}
34% {transform: translate(-50%,-50%) scale(0.8);}
36% {transform: translate(-50%,-50%) scale(1.1);}
38% {transform: translate(-50%,-50%) scale(0.9);}
40% {transform: translate(-50%,-50%) scale(1);}
72% {transform: translate(-50%,-50%) scale(1);}
74% {transform: translate(-50%,-50%) scale(0);}
100% {transform: translate(-50%,-50%) scale(0);}动画首先到达横屏的时候为 rotate_phone 动画的35%部分，我是以35%为错号缩放动画的中心时间，以2%为一个时间段（根据自己的需求），缩放程度先大后小scale(1.3)=>scale(0.8)=>scale(1.1)=>scale(0.9)=>scale(1)这里只是粗略的表示。正号的部分就是将错号的部分+50%或者-50%就可以了。超过100%的部分或者少于0%的部分在重新换算成0%~100%，比如72% => 22%。因此得到 scale_yes 动画
0% {transform: translate(-50%,-50%) scale(1);}
22% {transform: translate(-50%,-50%) scale(1);}
24% {transform: translate(-50%,-50%) scale(0);}
80% {transform: translate(-50%,-50%) scale(0);}
82% {transform: translate(-50%,-50%) scale(1.3);}
84% {transform: translate(-50%,-50%) scale(0.8);}
86% {transform: translate(-50%,-50%) scale(1.1);}
88% {transform: translate(-50%,-50%) scale(0.9);}
90% {transform: translate(-50%,-50%) scale(1);}
100% {transform: translate(-50%,-50%) scale(1);}第二处是主页背景颜色的变换动画
这个动画比较简单，就是背景颜色的变换，颜色我是借助 Ant Design 的颜色设计。下面贴代码
article {height: 100%;width: 100%;position: relative;animation: change_color 10s ease-in-out infinite;overflow: hidden}
@keyframes change_color {
0% {}
8% {background-color: #ffa39e;}
12% {}
28% {background-color: #b7eb8f;}
32% {}
48% {background-color: #ffadd2;}
52% {}
68% {background-color: #adc6ff;}
72% {}
88% {background-color: #ffe58f;}
92% {}
100% {background-color: #ffa39e;}
}第三处是转盘的转动
首先先把这个圆盘放在中间，这个不在动画范围而且比较简单就不多说。中间的指针是130px * 155px的，但是这里注意我们不能将指针图片中心与转盘中心重合，因为这个图片不是正方形，我们要把指针圆形的中心与转盘中心重合，我使用了绝对定位，这里使用calc计算属性（存在兼容性问题）解决上面重合问题。
css部分
article .disc .disc-box .zz {position: absolute;left: calc(50% - 65px);top: calc(50% - 90px);transform: rotate(0deg);transition: all 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);transform-origin: 65px 90px}js部分
$('.zz').css('transform','rotate(3000deg)')这里使用点击事件来出发事件改变样式。
第四部分是四边运动的文字
这部分比较简单，看代码就懂，其中两个稍微麻烦的点就是将四个文字盒子通过旋转平移到四个边，再有就是要先得到一个重复单元文字的长度。下面贴代码。
html部分
<div class="move">
<div class="top pp">
<p>
GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG
</p>
</div>
<div class="right pp">
<p>
GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG
</p>
</div>
<div class="bottom pp">
<p>
GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG
</p>
</div>
<div class="left pp">
<p>
GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG GUOZHIQIANG
</p>
</div>
</div>css部分
.move .pp {height: 80px;position: absolute;overflow: hidden;left: 0;top: 0;}
.move .top {width: calc(100vw - 80px);transform: translate(0px, 0px);}
.move .bottom {width: calc(100vw - 80px);transform: translate(80px, calc(100vh - 80px)) rotate(180deg);}
.move .right {width: calc(100vh - 80px);transform: translate(100vw, 0px) rotate(90deg);transform-origin: 0px 0px;}
.move .left {width: calc(100vh - 80px);transform: translate(0px, 100vh) rotate(-90deg);transform-origin: 0px 0px;}
.move .pp p {height: 80px;line-height: 80px;font-size: 50px;color: #000;animation: move 1.5s linear infinite;}
@keyframes move {
from {transform: translate(-422px, 0px);}
to {transform: translate(0px, 0px);}
}注意move动画这里的 -422px 就是一个重复单元文字的长度，既 "GUOZHIQIANG "的长度。
但这里css动画就看完了，代码很简单，这里是码云地址 https://gitee.com/guo_zq/color.git，喜欢请点赞哦。
转载请注明：CSS3 animation 练习
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
