CSS续
- CSS动画基础
- 2D转换
- 动画
CSS动画基础
2D转换
2D转换就是改变标签在二维平面上的位置和形状。
移动
语法：
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
x代表在水平方向上移动，y代表在竖直方向上移动。
实例：
1、没有设置移动以前的实现效果如下：
2、设置为transform:translate(x,y)实现结果如下：
3、设置为transform:translateX(n)实现结果如下：
4、设置为transform:translateY(n)实现结果如下：
注意 通过上面的实验及测试，我们可以发现上述三个语法不能一起使用，一般只能实现最后一次出现的语法。
旋转
在2D平面上顺时针或者逆时针旋转。单位是deg（度）。顺时针是正值，逆时针是负值。
语法：
transform:rotate(度数);
旋转中心一般默认为元素的中心点。旋转中心的语法如下：
transform-orgin:x y;
注意： 参数x，y用空格隔开；x y 默认旋转的中心点是元素的中心点即(50% 50%)；还可以给x和y设置像素或者方位名词(top right bottom left center)。
实例：
1、没有设置旋转之前的实现效果：
2、设置旋转效果及旋转中心以后的实现效果如下：
缩放
缩放，即缩小和放大。
语法：
transform:scale(x,y);
注意：
x代表水平方向上的缩放，y代表竖直方向的缩放。
transform: scale(1, 1): 宽和高都放大了一倍，相当于没有放大
transform: scale(2, 2): 宽和高放大了2倍
transform: scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)
transform: scale(0.5, 0.5): 缩小
scale缩放最大的优势： 可以设置转换中心点缩放，默认以中心带你缩放的，而且不影响其他盒子。
实例：
1、没有设置缩放之前的实现效果：
2、设置放大两倍的效果：
3、设置缩小一半的效果：
动画
动画的使用步骤如下：
i、定义动画
语法：
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}注意：
1、在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
2、动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
3、用百分比来规定变化发生的时间，或用from和to，等同于 0% 和 100%
4、0% 是动画的开始位置，100 % 是动画的完成位置。
ii、使用动画（在相应的里调用定义的动画）
语法：
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
...
}** 常见属性**
属性 | 描述 |
@keyframes | 定义动画 |
animation | 所有动画属性的简写属性，除了animation-play-state属性 |
animation-name | 动画名称，必不可少的 |
animation-duration | 规定动画完成一个周期的时间，默认是0（必须的） |
animation-timing-function | 规定动画的过渡类型 |
animation-delay | 设置动画的延迟时间 |
animation-iteration-count | 设置动画循环次数 |
animation-direction | 设置动画是否逆向播放 |
animation-play-state | 设置动画是否正在运行或暂停 |
animation-fill-mode | 设置动画结束后状态 |
实例：
实现一个圆形从页面最左边中间移动到正中间变为正方形，然后又从正方形移动到最右边中间，并实现一个颜色的渐变。能够实现循环播放（由于还不清楚怎么上传视频，这里只放一下代码。具体实现效果，大家可以自己下去实现一下。）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
padding:0px;
margin: 0px;
}
body{
width: 1400px;
height:600px;
background-color: #65C;
}
#box{
width:200px;
height: 200px;
margin:auto,0;
animation-name: move;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move{
0%{
transform: translate(0,200px);
border-radius: 50%;
background-color: blue;
}
25%{
transform: translate(550px,200px);
border-radius: 0%;
background-color: blue;
}
50%{
transform: translate(550px,200px);
border-radius: 0%;
background-color: #a67;
}
100%{
transform: translate(1170px,200px);
border-radius: 50%;
background-color: #a67;
}
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
