animation动画属性的使用方法
步骤一:定义动画
@keyframes 动画名称 {}
@keyframes 动画名称 {
0% {}
70% {
···
}
100% {
···
}
}
里面的百分比是定义的时间节点,定义这个时间下元素的状态,
例如动画总时间为 2秒,则0%代表初始时间,70%代表 2S * 70% = 1.4s 时,100% 代表动画结束时间
步骤二:使用动画
在要使用动画的元素里面添加animation属性
可以分开写,也可以简写
animation是综合写法:顺序为如下:
animation: name duration timing-function delay iteration-count direction fill-mode;
animation-name等是单独指出动画的相关信息
其中:animation-name 和 animation-duration 这两个是必需要写的
animation-timing-function默认是:animation-timing-function:ease
想要匀速的话:animation-timing-function:linear
animation-iteration-count默认是:animation-iteration-count:1(动画效果展示一次后停止)
想要一直动画效果:animation-iteration-count:infinite(无限循环)
有时需要鼠标放在动画上时,动画效果停止,可以设置鼠标悬浮时,元素:animation-play-state:paused
想要动画执行后停止在结束状态:animation-fill-mode:forwards
设置分几步完成动画:animation-timing-function:steps(步数) - - - 这个是匀速变化的
更多使用方法可以查阅CSS手册,或上网查询
动画使用示例
示例1:地图
<!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>动画--地图案例</title>
<style>
body {
background-color: #f0e1ce;
}
.map {
position: relative;
width: 600px;
height: 350px;
margin: 100px auto;
background: url(images/地图.jpg) no-repeat center/600px 350px;
}
.city {
position: absolute;
top: 200px;
left: 361px;
}
.point {
position: absolute;
top: 8px;
left: -8px;
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
}
.city div[class^="pulse"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
box-shadow: 0 0 12px #fff;
border-radius: 50%;
opacity: 1;
/* 使用动画:
animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: pulse 1s linear 0s infinite;
}
.city div.pulse2 {
animation-delay: .2s;
}
.city div.pulse3 {
animation-delay: .4s;
}
/* 定义动画 */
@keyframes pulse {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<span>湖北</span>
<div class="point">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</div>
</body>
</html>
原理:
一个实心点+3个圈,圈不给边框,给阴影,圈的大小和实心点一致,给3个圈加上变大的动画效果,第2个和第3个圈依次延时发生动画,圈从开始的透明度为1(即不透明),中间变化时透明度为1,到结束时透明度为0(即完全透明),
最后产生由坐标中心向外扩散波动的页面效果
页面效果:
示例2:奔跑的小熊
<!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>动画-奔跑的小熊</title>
<style>
* {
margin: 0;
padding: 0;
}
.mountain1 {
height: 600px;
/* background-color: #fff; */
background: url(images/云1.jpg) no-repeat 0 bottom;
/* 使用动画 */
animation: bg-move 20s linear infinite;
}
.mountain2 {
height: 600px;
background: url(images/bg1.png) no-repeat 0 bottom;
/* 使用动画 */
animation: bg-move 15s linear infinite;
}
.bear {
position: absolute;
top: 500px;
left: 0;
width: 200px;
height: 100px;
background: url(images/bear.png) no-repeat;
/* 使用动画 */
animation: bear-run .8s steps(8) infinite, bear-move 10s forwards;
}
/* 定义动画 */
@keyframes bear-run {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes bear-move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
@keyframes bg-move {
0% {
background-position: 0 bottom;
}
100% {
background-position: right bottom;
}
}
</style>
</head>
<body>
<div class="mountain1">
<div class="mountain2">
<div class="bear"></div>
</div>
</div>
</body>
</html>
小熊的图片为:
原理:
小熊作为背景图,整个图为8个小熊,宽1600px,,每个小熊200px,使小熊背景图向左移动,即改变background-position的值,分8步移动完整个小熊背景图,每一步一个动作,连起来就成了动画
可以同时使用多个动画,多个动画使用逗号隔开,小熊从左跑到中间后停止向前,停在屏幕中央原地奔跑,让后面的山等背景向左移动,就产生了小熊一直在向前跑的视觉效果
页面效果:
最后小熊会跑到中央: