世间女子千万钟，愿每个人都活出自己最美的姿态，善待时光，也善待自己！
祝女神们节日快乐！
animation: shift 1s linear infinite alternate;
分开写：
animation-duration: shift; 关键帧的名称
animation-duration: 1s; 动画时长
animation-timing-function: linear; 时间函数
animation-iteration-count:infinite; 动画执行多少次，infinite无限次
animation-direction: alternate; 动画的方向
animation-delay 动画的延时启动时长
例：鼠标指针悬停在容器上→小球先变红，但不动→0.5s之后小球开始移动→1s之后移到右侧。
<div class="container">
<div class="ball"></div>
</div>
.container{
font-size: 30px;
width: 9em;
height: 3em;
border:.3em solid skyblue;
border-radius: 2em;
}
.container .ball{
width: 3em;
height: 3em;
border-radius: 50%;
background-color: dodgerblue;
transition: transform 1s;
transition-delay: .5s;
}
.container:hover .ball{
transform: translateX(6em);
background-color: lightcoral;
}
【缓动与动画的区别】
在缓动触发时，不参与缓动的属性会先变为终止状态，在延时结束之后，参与缓动的属性慢慢变为终止状态；
而动画则因为不能指定哪些属性不参与动画，所以所有的属性在延时结束之前都不会发生变化。
.container{
font-size: 30px;
width: 9em;
height: 3em;
border:.3em solid skyblue;
border-radius: 2em;
}
.container .ball{
width: 3em;
height: 3em;
border-radius: 50%;
background-color: dodgerblue;
transition: transform 1s;
transition-delay: .5s;
}
.container:hover .ball{
animation: shift 1s forwards;
animation-delay: .5s;
}
@keyframes shift{
to{transform: translateX(6em);}
0%,100%{
background-color: lightcoral;
}
}
动画可分段执行
.container{
font-size: 30px;
width: 9em;
height: 3em;
border:.3em solid skyblue;
border-radius: 2em;
}
.container .ball{
width: 3em;
height: 3em;
border-radius: 50%;
background-color: dodgerblue;
animation: shift 6s cubic-bezier(0.75, -0.5, 0.25, 1.5) infinite;
}
@keyframes shift{
33%{transform: translateX(2em);}
66%{transform: translateX(4em);}
100%{transform: translateX(6em);}
}
【animation-direction定义了动画的方向】
normal 从动画起点向终点运动
alternate 从动画起点向终点运动然后再折返到起点
reverse 从动画的终点向起点运动
alternate-reverse 从动画的终点向起点运动，然后再折返到终点
折返是来回，animation-iteration-count的属性值至少要大于或等于2
【animation-fill-mode】
none 默认值，表示动画结束之后，元素回到动画之前的状态
forwards 表示动画结束之后，元素保持在最后一帧的状态
backwards 在动画之前令元素处于动画第1帧的状态
both
.container{
font-size: 30px;
width: 9em;
height: 3em;
border:.3em solid skyblue;
border-radius: 2em;
}
.container .ball{
width: 3em;
height: 3em;
border-radius: 50%;
background-color: dodgerblue;
animation: shift 1s linear forwards;
}
.container:nth-child(1) .ball{
transform: scale(0);
filter: opacity(0);
/*animation: show 1s infinite;*/
}
.container:nth-child(2) .ball{
/*animation: show 1s infinite;*/
animation-fill-mode: backwards;
}
@keyframes show{
from{
transform: scale(0);
filter: opacity(0);
}
to{
transform: scale(1);
filter: opacity(1);
}
}
【animation-play-state 定义了动画的状态】
running 动画正常播放
paused 动画暂停
若省略掉from，则以元素动画之前的静止状态作为动画的起点。
若省略掉to，则以元素动画之前的静止状态作为动画的终点
0%=from
100%=to
百分比关键帧的缺点：
1.每一步的变化都是相对元素未动画前的状态，而不是相对上一步变化之后的结果。违反生活经验
2.不关心具体时间，若要调整动画时长，要配合修改关键帧的百分比值
3.无法明确声明两次动画之间的间隔时间，必须把间隔时间算到一次动画内，使动画的持续时间变长，增加了理解的难度
例：发光的钻石
<div class="diamond">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
body {
margin: 5em;
background-color: navy;
}
.diamond {
--color1: deepskyblue;
--color2: steelblue;
--color3: royalblue;
--color4: dodgerblue;
font-size: 10px;
width: 10em;
display: grid;
grid-template-columns: 1fr 1fr;
transform: rotate(45deg);
}
.diamond div {
border-width: 5em;
border-style: solid;
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
.diamond div:first-child {
border-color: transparent var(--color2) var(--color3) transparent;
}
@keyframes animate{
0%,100%{
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
25%{
border-color: var(--color4) var(--color1) var(--color2) var(--color3);
}
50%{
border-color: var(--color3) var(--color4) var(--color1) var(--color2);
}
75%{
border-color: var(--color2) var(--color3) var(--color4) var(--color1);
}
}
.diamond div:not(:first-child){
animation: animate 2s linear infinite;
}
.diamond div:nth-child(3){
animation-delay:-0.3s;
}
.diamond div:nth-child(4){
animation-delay:-0.6s;
}
网友评论