transition 属性
- animation 属性是
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state
属性的一个简写属性形式。 - 并非所有属性都支持
animation
。支持animation
的属性 – CSS animated properties - 用于指定一组或多组动画,每组之间用逗号相隔。
- 语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
animation-name 属性,指定元素要进行的一系列动画名称,每个名称对应是 @keyframes
定义的动画序列名称。
@keyframes
- @keyframes (关键帧),根据规则用于定义动画关键帧的样式,来控制
CSS动画
的中间步骤。 - 定义动画时,使用
%
或 关键字from
和to
,来设置动画中间步骤的变化。from
相当于0%
,to
相当于100%
- 为了获得最佳的浏览器支持,您应该始终定义
0%
和100%
的选择器。 - 语法:
@keyframes <规则名称>
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
animation-duration
- animation-duration 属性指定动画持续时间。默认值为 0,意味着没有动画效果。
- 动画周期的时长,单位为秒
(s)
或者毫秒(ms)
,无单位或负值无效。
animation-timing-function
- animation-timing-function 属性控制CSS动画执行的节奏。
- 其规定好了几个默认值
linear|ease|ease-in|ease-out|ease-in-out
,实现移动效果。也可是使用cubic-bezier(n,n,n,n)
函数自定义,移动曲线。 - 使用
steps(n,[start | end])
实现跳跃动画,简单理解就是0%
到下一个规则,只变化n
次,不是补间动画。
animation-delay
- animation-delay CSS属性定义动画于何时开始,即延迟动画执行时间。
- 值可用单位为秒(s)和毫秒(ms)。如果未设置单位,定义无效,0s为默认时间。
- 设置负值,为直接在减少时间的对应帧开始动画。
animation-iteration-count
- animation-iteration-count 属性 定义动画在结束前运行的次数 可以是1次 无限循环,默认值为1。
- 值:
infinite
无限次,<number>
正数为次数,小数会执行到对应位置结束,负数为无效值。
animation-direction
animation-direction 属性指示动画是否反向播放。
normal
每个动画循环结束,动画重置到起点重新开始,这是默认属性。
alternate
每个动画循环结束,动画重结束点反向开始。
reverse
从结束点,反向开始执行动画。
alternate-reverse
从结束点,反向开始执行动画,到起始点反向执行到结束点,一直重复。
animation-fill-mode
- animation-fill-mode 属性,用于设置动画在执行之前和之后是否保留关键帧对应的样式。
- 默认值
none
不修改任何样式。 forwards
当动画结束后,修改元素样式为最后一帧的样式。backwards
当动画开始时,修改元素样式为第一帧样式。比如设置了等待时间,等待时间中也会修改元素样式为第一帧样式。both
遵循forwards和backwards
的规则,开始后结束都修改样式。
animation-play-state
- animation-play-state 属性定义一个动画是否运行或者暂停。
- 值
paused
规定动画已暂停。running
规定动画正在播放。一般是通过js
来给元素设置这个属性控制动画。
常用方式
推举文章:【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
波纹效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.animation {
box-sizing: border-box;
position: relative;
width: 20px;
height: 20px;
margin: 100px auto;
background: #409eff;
border-radius: 50%;
}
.animation:after {
box-sizing: border-box;
content: "";
display: block;
position: relative;
width: 20px;
height: 20px;
border: 5px solid #ff1883;
border-radius: 50%;
-webkit-animation: antSing 1.2s ease-in-out infinite;
animation: antSing 1.2s ease-in-out infinite;
}
@keyframes antSing {
0% {
border-color: #409eff;
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
100% {
border-color: #ff1883;
-webkit-transform: scale(2.5);
transform: scale(2.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
- 通过动画属性,设置元素变大的同时隐藏,实现波纹效果
加载中动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.loading {
background-color: #000000;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
.loading-center-load {
position: relative;
height: 20px;
width: 100px;
margin: 200px auto;
}
.object {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
-webkit-animation: object 2.5s linear infinite;
animation: object 2.5s linear infinite;
}
.object_one {
}
.object_two {
left: 20px;
animation-delay: -0.5s;
}
.object_three {
left: 40px;
animation-delay: -1s;
}
.object_four {
left: 60px;
animation-delay: -1.5s;
}
.object_five {
left: 80px;
animation-delay: -2s;
}
@keyframes object {
0% {
left: 100px;
top: 0;
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 15px;
}
95% {
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0;
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loading-center-load">
<div class="object object_one">1</div>
<div class="object object_two">2</div>
<div class="object object_three">3</div>
<div class="object object_four">4</div>
<div class="object object_five">5</div>
</div>
</div>
</body>
</html>
- 我们需要5个球动起来,先设置小球的位置。
- 定义运动轨迹,使用
infinite
无限循环效果。 - 使用
animation-delay
属性设置负值,让动画第一次循环,直接从对应帧位置执行,保证循环效果。
使用雪碧图实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.loading {
width: 75px;
height: 140px;
background: url(./1.png);
margin: 100px auto;
animation:imgFr 1s step-start infinite ;
}
@keyframes imgFr {
0% {
background-position: 0 0;
}
14.3% {
background-position: -80px 0;
}
28.6% {
background-position: -160px 0;
}
42.9% {
background-position: -240px 0;
}
57.2% {
background-position: 0 -143px;
}
71.5% {
background-position: -80px -143px;
}
85.8% {
background-position: -160px -143px;
}
100% {
background-position: -240px -143px;
}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
- 主要是使用
background-position
属性获取图片人物的位置。 - 使用
step-start
让动画不是补间动画,而是跳跃动画。step-start
等同于steps(10,start)
动画分成10步,动画执行时为开始左侧端点的部分为开始。