一. 前言
本文适用与对css有一定基础的小伙伴，起码能理解各个属性的作用，如果你是css小白，那建议你先学习一些css的常用属性，对你看本文有更多帮助。
文中的代码你可以直接复制到一个html文件中进行测试，不过要加上html的基本结构:
<html>
<head>
<title>Test Page</title>
<style>
/*这里写css...*/
</style>
</head>
<body>
<!-- 这里写html -->
</body>
</html>
二. CSS3的新属性transform
transform属性：用来对元素进行旋转、拉伸、移动等变形动作，Transformers变形金刚 :)
比如，我们用transform来做一个旋转，示例如下：
css:
.box{
font-size: 2em;
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background: red;
transform: rotate(180deg);
position: absolute;
left: 300px;
top: 300px;
}
html:
<div class="box">我的是一个红盒子</div>
效果:
三. CSS动画制作方式一：:hover + transition过渡动画
我们都知道hover是鼠标移动的一个交互，例如，鼠标移动上去之前和之后的样式有区别：
css:
.box{
font-size: 2em;
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 300px;
top: 300px;
}
.box:hover{
background-color: blue;
color: #ffffff;
transform: rotate(180deg);
}
html:
<div class="box">我的是一个红盒子</div>
效果：
但是这样子一个效果是直接切换的，也就是从正常瞬间就变成180度翻转。如果要让这个翻转有一个过渡效果（也就是动画），我们就需要transition属性来帮忙。
transition属性用来指定哪一个css属性用来做过渡动画，并且可以设置过渡动画的时间
现在我们再添加一个属性transition: transform 2s;到css中，代码如下：
css:
.box{
font-size: 2em;
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 300px;
top: 300px;
transition: transform 2s; /* 这里指定了transform属性为过渡动画，动画时间为2秒 */
}
.box:hover{
background-color: blue;
color: #ffffff;
transform: rotate(180deg);
}
html:
<div class="box">我的是一个红盒子</div>
效果：
由于懒的做gif效果图，所以...假装有效果了 :)
四. CSS动画制作方式二：animation动画属性
animation动画属性用来指定一个动画过程和播放的时间
制作步骤：
- 定义一个动画过程的起始和结束状态
- 用
animation指定这个过程，并设置时间
代码如下：
css:
@keyframes myAnimate /* 定义一个css动画过程 */
{
from {background: red;} /* 开始的样式 */
to {background: blue;} /* 结束的样式 */
}
.box{
font-size: 2em;
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 300px;
top: 300px;
transition: transform 2s;
}
.box:hover{
color: #ffffff;
animation: myAnimate 2s; /* 用animation指定一个动画过程，并设置时间 */
}
html:
<div class="box">我的是一个红盒子</div>
效果：
继续假装有效果 :)
五. 后记：一些要注意的地方
1. 浏览器兼容性问题
既然是CSS3，那么对浏览器肯定是有要求的，上述所有代码我的测试环境是Chrome 79和Safari 12，测试正常。
各个浏览器对Css3的各个属性的支持都不一样，至于哪些浏览器支持哪些属性，不是我们这里要讨论的，可以看我下方分享的扩展阅读。
2. 写出兼容性代码
上述的所有代码写法没有考虑兼容性，只是为了演示效果说明问题，那么什么是正确的写法，可以参考下面的写法：
/* 旋转hack */
.box{
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
}
/* transition hack */
.box{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
/* 定义过程 hack */
@keyframes myAnimate{
from {background: red;}
to {background: blue;}
}
@-webkit-keyframes myAnimate /* Safari 与 Chrome */{
from {background: red;}
to {background: blue;}
}
/* animation hack */
div
{
animation: myAnimate 5s;
-webkit-animation: myAnimate 5s; /* Safari 与 Chrome */
}
这里的写法只是冰山一角，Css兼容问题是一个老问题了，当然，现在有很多工具包括脚手架工具如webpack，grunt等可以帮我们自动解决这些问题，后续会继续与大家分享。
3. 更多Css动画知识内容
更多的动画知识内容比如旋转、放大缩小、拉伸、运动，动画时间控制，播放控制等，你可以参考扩展阅读第一个教程，那个教程非常详尽。
谢谢您的阅读 :)
扩展阅读：
- CSS3详细的动画教程，可以看这篇：www.runoob.com/css3/css3-t…
- CSS3 hack： 看这篇
