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
更多技术干货：风匀坊
关注公众号：风匀坊