CSS动画效果入门

简介

只用CSS3实现动画效果。

基本代码


 
 
定义一个动画对象

<div id="box"></div>



 
 
定义基本样式

#box{
  width:100px;
  height:100px;
  background-color:blue;
}


通过以上代码定义一个蓝色四边形。


 
 

改变动画颜色

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
        }

        /* 动画 */
        @keyframes anime
        {
            100% {
                background-color:red;
            }
        }


四边形从蓝色3秒后完全变成红色。

新增三个部分内容：
- 声名动画
动画代码中的%号，指定执行过程中对应的CSS状态。本例子中，不是3秒后，突然变成红色，而是3秒内随着状态到达100%，颜色渐渐变红。
- 指定动画名
- 动画执行时间

滑动

四边形向右滑动

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            position: relative;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
        }

        /* 动画 */
        @keyframes anime
        {
            0% {
                left: 0px;
            }
            100% {
                left: 500px;
            }
        }


0%: 定义四边形滑动的初始位置
100%: 定义四边形滑动的最终位置
3s: 动画执行的时间

实现了四边形时，3秒后向右移动500像素。

旋转

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
        }

        /* 动画 */
        @keyframes anime
        {
            100% {
                transform:rotate(360deg);
            }
        }


100%： 定义旋转结束后四边形对就的角度

大小变化

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
        }

        /* 动画 */
        @keyframes anime
        {
            100% {
                transform:scale(0.1);
            }
        }


3秒后，变成原大小的10%。

指定循环次数

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
            animation-iteration-count: infinite; /* 无限循环 */
            /*animation-iteration-count: 2;*/  /* 2次循环 */
        }

        /* 动画 */
        @keyframes anime
        {
            100% {
                transform:scale(0.1);
            }
        }


animation-iteration-count: 指定循环次数。 （infinite：无限循环）

运动模式变化

        #box{
            width:100px;
            height:100px;
            background-color:blue;
            position: relative;
            animation-name: anime; /*　分配动画名 */
            animation-duration: 3s; /* 动画执行时间 */
            animation-timing-function: linear; /* 匀速*/
            /*animation-timing-function: ease;  !* 渐变加速*!*/
            /*animation-timing-function: ease-in;  !* 渐入式加速*!*/
            /*animation-timing-function: ease-out;  !* 渐出式减速*!*/
            /*animation-timing-function: ease-in-out;  !* 渐入渐出*!*/
        }

        /* 动画 */
        @keyframes anime
        {
            0% {
                left: 0px;
            }
            100% {
                left: 500px;
            }
        }


animation-timing-function: 指定运动的模式

本文代码

github相关源码

参考链接

https://qiita.com/kuniatsu/items/eef304ce567384e4de6b

查看原文：http://www.huuinn.com/archives/224
更多技术干货：风匀坊
关注公众号：风匀坊