动画(animation)
1、动画(animation)
是css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相对比较过渡,动画可以实现更多变化,更多控制,持续自动播放等效果。
1.1动画的基本使用
制作动画分为两步:
1、先定义动画
用keyframes定义动画(类似定义类选择器)
动画序列
-
0%是动画的开始,100%是动画的完成。这样的格则就是动画序列。
-
在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果。
-
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多样式的次数。
-
请用百分比来规定变化的时间,或用关键词“from”和“to”,等同于0%和100%
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
2、在使用(调用)动画
如果只有开始和结束的和也可以使用“from”、“to”语句
我们已经实现了简单的div移动效果,而animation它的用法可不仅如此,然后我们通过上面的例子进行一个进阶练习,多状态变化。
注:上面的0%步骤可以省略
5.2动画常用属性
5.3动画简写属性
animation:动画名称 持续时间 运动线性 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s liner 2s infinite alternate
注:简写属性中不包括animation-play-state
案例:
HTML:
<div class="map">
<div class="city tianjin">
<div class="ddd"></div>
<div class="poit2"></div>
<div class="poit3"></div>
</div>
<div class="city cangzhou">
<div class="ddd"></div>
<div class="poit2"></div>
<div class="poit3"></div>
</div>
</div>
CSS:
<style>
.map{
position: relative;
background: #000;
height: 500px;
width: 1000px;
margin: 0 auto;
}
.city{
position: absolute;
top: 200px;
right: 180px;
}
.cangzhou{
top: 300px;
right: 50%;
}
.map .ddd{
width: 8px;
height: 8px;
background: #ff0;
border-radius: 50%;
}
.map div[class^="poit"]{
position: absolute;
width: 8px;
height: 8px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: 0 0 12px #ff0;
animation: pulse 2s linear infinite;
}
.poit3{
animation-delay: 1s !important;
}
@keyframes pulse{
70%{
width: 40px;
height: 40px;
opacity: 1;
}
100%{
width: 50px;
height: 50px;
opacity: 0;
}
}
</style>
效果图:
1.4速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease”
动画部分已经完结,随后会更新css 3D