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>