前面学的过渡只有在鼠标移入的时候才有效,所以如何做一个一直在动的呢?
用动画。
动画
动画和过渡类似,可以实现动态的效果,但是过渡需要在某个属性发生变化时才会触发,而动画则自动触发。
关键帧
设置动画效果,必须先要设置一个关键帧。
@keyframes test {
/* from表示动画的开始位置 */
/* from 和 0% 是等价的 */
from{
margin-left: 0;
}
/* to表示的结束位置 */
/* to 和100% 是等价的 */
to{
margin-left: 700px;
}
为元素设置动画
用animation-name设置,前面设置的关键帧名字为test,所以这里写test。
.box2{
background-color: #bfa;
animation-name: test;
}
设置执行时间
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
}
设置动画延时
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
}
设置时序函数
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
}
设置动画执行的次数
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
设置方向
未设置这个前,移动方向为从from到to。
animation-direction可以指定动画运行的方向。
可选值:
normal:默认值。从from到to,如果我设置的动画次数大于1,则到了to之后,直接跳到from,然后从from向to运行。
reverse:从to到from。
alternate:这个也是from到to,但是到了to之后,是从to到from运行回来。
alternate-reverse:和上一个相反,不过差不多。
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
animation-direction: alternate;
}
设置动画的执行状态
animation-play-state
可选值:
running:默认值,动画执行。
paused:动画暂停。
可以写在hover里,这样鼠标移入就暂停动画。
.box1:hover div{
animation-play-state: paused;
}
设置动画填充模式
animation-fill-mode
设置动画填充模式。
可选值:
none:默认值,动画执行完毕,元素回到初始位置。注意不是from。
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 10px;
}
我在这里给box1的子元素box2设置了10px的margin-left,所以回到的位置是10px,不是from的0。
forwards:动画执行完毕,元素会停在动画的结束位置。
backwards:动画延时等待时,元素处于from的状态。
为了体现这一点,改改背景颜色。
box2的背景颜色为:
background-color: #bfa;
然后在关键帧设置里设置背景颜色:
@keyframes test {
/* from表示动画的开始位置 */
/* from 和 0% 是等价的 */
from{
margin-left: 0;
background-color: orange;
}
/* to表示的结束位置 */
/* to 和100% 是等价的 */
to{
margin-left: 700px;
background-color: red;
}
如果没有设置backwards,则在一开始的延时2s时间里,box2的颜色时#bfa;如果设置了backwards,则延时的2s时间里,颜色时orange。
both:结合了forwards和backwards的功能。
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count:1;
animation-direction: alternate;
animation-fill-mode: both;
}
整个代码
<!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>
*{
margin: 0;
padding: 0;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 10px;
}
.box2{
background-color: #bfa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count:1;
animation-direction: alternate;
animation-fill-mode: both;
}
.box1:hover div{
animation-play-state: paused;
}
@keyframes test {
/* from表示动画的开始位置 */
/* from 和 0% 是等价的 */
from{
margin-left: 0;
background-color: orange;
}
/* to表示的结束位置 */
/* to 和100% 是等价的 */
to{
margin-left: 700px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>