CSS3 animation 练习

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:;top:;}
.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 练习