在写页面的时候，我们经常会需要实现一些动画效果，从而来提升交互度，使页面美观并且好用。实现一些复杂动画我们会用到JavaScript；但如果只是简单的切换，实现一些小的交互效果时，我们可以使用css动画。举个例子，无限轮播图功能就可以使用css动画来实现。下面我会介绍一下css动画的几个模块，阐述关键的属性，并且放一些小例子。
过渡模块 （transition）
transition 通常用于做过渡动画; 我的使用方法是，先写好基本界面样式，然后写好过渡以后期望的样式，最后给对应的元素添加过渡。
transition-property: 哪个属性需要执行过渡效果；默认值为all；
transition-duration：过渡效果持续的时长； 默认值为0；
transition-delay: 延迟多少秒之后开始执行过渡动画； 默认值为0；
transition-timing-function: 控制过渡动画的速度；默认值为ease；
一共有5个值分别是：
匀速 linear； 逐渐慢下来 ease； 加速 ease-in； 减速 ease-out ； 先加速后减速 ease-in-out;
transition 属性连写顺序：transition: property duration timing-function delay; 连写的时候可以省略后面两个参数。
Example：
div {
width: 100px;
height: 100px;
background-color: rgb(247, 215, 237);
<!-- 多个属性需要同时执行过渡效果时，用逗号分隔。-->
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition-delay: 1s;
<!-- 过渡连写：transition: width 5s, background-color 5s linear 0s; -->
}
div:hover {
width: 300px;
background-color: rgb(241, 124, 204);
}
2D/3D 转换模块（transform）
transform 有3个值，分别是： 旋转 rotate(); 平移 translate(); 缩放scale();
平移
第一个参数: 水平方向；第二个参数:垂直方向。
用法： transform: translate(-100px, 0px)
缩放
如果取值是1，代表不变；大于1则放大，小于1则缩小。如果水平和垂直缩放都一样，可以简写为一个参数。
用法： transform: scale(1.5, 1) ； transform: scale(2)
旋转
用法： transform: rotate(45deg)， 其中deg为单位。
Example：
效果
<head>
... ...
<style>
ul {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background: yellow;
transform: rotate(30deg);
}
ul li:nth-child(2){
background: orange;
transform: rotate(50deg);
}
ul li:nth-child(3){
background: pink;
transform: rotate(70deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
transform-origin 形变中心点
默认情况下，所有的元素都是以自己的中心点作为参考来旋转的。可以通过transform-origin属性来修改它的参考点。取值可以是：
像素： transform-origin: 0px 0px 水平0 垂直0 则中心点为左上角；
百分比： transform-origin: 50% 50% 为中心点；
特殊关键字： transform-origin: left top 为左上角；
Example：
在上面例子的代码中的 ul li 中添加一句更改中心点的代码，效果就会完全不一样。
中心点修改后的效果
...
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transform-origin: 0px 0px;
}
...
旋转轴向
3D transform中有下面这三个方法 (在默认情况下，所有元素都是围绕z轴旋转的。)：
围绕x轴旋转: rotateX(30deg)
围绕y轴旋转: rotateY(30deg)
围绕z轴旋转: rotateZ(30deg)
透视属性 (perspective)
实现近大远小的效果，值越大效果越弱；
透视属性有2种使用 方式，第一种是用在动画元素门的共同父辈元素，即在其父元素上使用这个属性；第二种则是直接用在当前的动画元素上，与transform的其他属性写在一起。这两种方式的结果是不同的。
.father {
perspective: 200px;
}
/*第二种形式*/
.father .child1 {
transform: perspective(200px) rotateY(30deg);
}
Example：
以下所有的例子是perspective在父元素上的视角。
围绕y轴旋转，添加透视属性后的效果
ul {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
perspective: 200px;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transform-origin: 0px 0px;
}
ul li:nth-child(1){
background: orange;
transform: rotateY(30deg);
}
transform-style: preserve-3d
transform-style属性在实现3D效果的时候是必须添加的属性。默认值为 flat (表示平面效果)； preserve-3d 表示3D效果。
注意： 这个属性必须应用在3D变换的兄弟元素们的父元素上。
盒子阴影和文字阴影
给盒子添加阴影
顺序： 水平偏移 / 垂直偏移 / 模糊度 / 阴影扩展 / 阴影颜色 / 内外阴影（有inset 代表框内阴影，不带inset 代表框外阴影，默认是外阴影）
box-shadow: h-shadow v-shadow blur spread color inset;
例子：box-shadow: 10px 10px 10px 0px pink inset;
快速添加阴影只需要给3个参数： 水平，垂直， 以及模糊度。
box-shadow: 10px 10px 10px;
给文字添加阴影
顺序： 水平偏移 垂直偏移 模糊度 阴影颜色（不支持内外阴影 ）
text-shadow: 10px 10px 5px blue;
Example：
效果
<html>
<head>
... ...
<style>
div {
width: 200px;
height: 200px;
background-color: rgb(250, 207, 214);
margin: 0 auto;
box-shadow: 10px 10px 10px 0px rgb(179, 100, 113);
}
div p {
color: rgb(156, 156, 156);
text-align: center;
font-size: 24px;
text-shadow: 10px 10px 5px;
line-height: 200px;
}
</style>
</head>
<body>
<div>
<p>仙女萝</p>
</div>
</body>
</html>
动画模块
与过渡不同的是，过渡必须人为的触发才会执行动画，动画不需要人为的触发就能执行。
满足以下3点，就能看到最基本的动画效果了。
动画三要素：
需要执行哪个动画(animation-name)；
需要自己创建一个名称叫做 xxx 动画 (@keyframes xxx)；
动画持续的时长(animation-duration);
Example:
div {
width: 50px;
height: 50px;
background: pink;
animation-name: xxx;
animation-duration: 3s;
}
@keyframes xxx {
from{
margin-left: 0;
}
to {
margin-left: 500px;
}
}
动画属性
animation-delay: 多少秒之后开始执行动画， 默认是0；
animation-timing-function: 控制动画的速度， 默认是 ease；
animation-iteration-count: 动画播放的次数 ，默认播放次数为1次；【值：可以是具体数字，也可以是关键词，例如： infinite】
animation-direction：是否需要做往返动画， 默认为normal；【值：normal, alternate】
animation-play-state: 当前动画是否需要暂停， 默认为running； 【值：running, paused】
animation-fill-mode: 用于指定动画开始之前的状态和结束状态的样式；【值：none, forwards (结束状态保持动画最后一帧的样式)， backwards(等待状态时显示动画第一帧), both】
动画的第二种方式
除了上面例子里写的使用关键词"from"，"to"，还可以使用百分比来规定变化发生的时间 (0% ~ 100%)。
Example
div {
width: 100px;
height: 50px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
animation-name: sun;
animation-duration: 5s;
}
@keyframes roundTwo {
0% {
left: 0;
top: 0;
}
25% {
left: 300px;
top: 0;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 0;
top: 300px;
}
100% {
left: 0;
top: 0;
}
}
动画模块连写格式
animation: name, duration, timing-function, delay, count, direction;
网友评论