Skip to content

Instantly share code, notes, and snippets.

@mqxu
Created November 3, 2019 12:15
Show Gist options
  • Save mqxu/02e2f0fad47c4fa12c043d95641ce274 to your computer and use it in GitHub Desktop.
Save mqxu/02e2f0fad47c4fa12c043d95641ce274 to your computer and use it in GitHub Desktop.
【iCSS:行为】使用animation-delay保留动画起始帧
<div class="bruce flex-ct-x">
<ul class="initial-keyframe">
<li></li>
<li></li>
<li></li>
</ul>
</div>
.initial-keyframe {
position: relative;
width: 100px;
height: 100px;
li {
position: absolute;
border-radius: 100%;
width: 100%;
height: 100%;
background-color: #3c9;
transform: rotate(0) translate(-80px, 0);
animation: rotate 3s linear infinite;
&:nth-child(2) {
animation-delay: -1s;
}
&:nth-child(3) {
animation-delay: -2s;
}
}
}
@keyframes rotate {
to {
transform: rotate(1turn) translate(-80px, 0);
}
}
<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment