1、动画的基本使用
1)第一步:定义关键帧(定义动画)
简单方式定义:
完整方式定义:
2)第二步:给元素应用动画,用到的属性如下:
1.animation-name:给元素指定具体的动画(具体的关键)
2.animation-duration:设置动画所需时间
3. animation-delay : 设置动画延迟
2、动画的其他属性
1)animation-timing-function,设置动画的类型,常用值如下:
2)animation-iteration-count,指定动画的播放次数,常用值如下:
3)animation-direction,指定动画方向,常用值如下:
4)animation-fill-mode ,设置动画之外的状态:
5)animation-play-state ,设置动画的播放状态,常用值如下:
3、动画复合属性
只设置一个时间表示 duration,设置两个时间分别是: duration 和 delay
其他属性没有数量和顺序要求
4、动画与过渡的区别
1)动画不需要任何触发条件,过渡必须要有触发条件,(过渡可以往返)
2)动画可以通过关键帧在运动的过程中进行精细的设计,过渡只关注始末。
实例:
<style>
.outer {
width: 1000px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
}
/* 过渡 实现inner1 跑到右边 */
.inner1 {
background-color: orange;
transition: 3s linear;
}
.outer:hover .inner1 {
transform: translate(900px);
}
/* 动画 实现inner2 跑到右边 */
@keyframes linsir {
0% {}
50% {
background-color: red;
border-radius: 50%;
box-shadow: 0px 0px 20px black;
}
100% {
transform: translate(900px);
}
}
.inner2 {
background-color: skyblue;
animation: linsir 3s linear forwards;
}
</style>
<body>
<div class="outer">
<div class="inner inner1">过渡</div>
<div class="inner inner2">动画</div>
</div>
</body>
5、动画案例(自行车手骑行画面)
<style>
div {
width: 130px;
height: 130px;
background-image: url('../image/bike.png');
margin: 0 auto;
margin-top: 100px;
animation: bike 1s steps(31) infinite;
}
@keyframes bike {
from {}
to {
background-position: 0px -4030px;
}
}
</style>
<body>
<div class="outer">
<div class="inner inner1">过渡</div>
<div class="inner inner2">动画</div>
</div>
</body>