我有一个CSS动画,我想在最后停止,但它返回到初始状态,尽管我使用的是“ animation-fill-mode:forwards;”。 拜托任何人,动画最初是无限的,所以我将迭代次数设置为1,但现在运行了一次便重置了。
这是Codepen的链接,我正在尝试调整https://codepen.io/donovanh/pen/GgYEBZ
body {
background: #fff;
}
.watch {
background: #000 url(https://cssanimation.rocks/assets/images/posts/watch/watchbg.jpg) no-repeat;
background-size: 100%;
font-family: "San Francisco Display UltraLight", "Open Sans", Helvetica, Arial, Serif;
font-size: 32px;
width: 440px;
height: 487px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.screen {
width: 59.2%;
height: 74%;
position: absolute;
left: 18%;
top: 13%;
/**** DIAL 1 ****/
/**** DIAL 2 ****/
/**** DIAL 3 ****/
}
.screen .title, .screen .time {
animation: show-title 5s 1 ease-out forwards;
color: #b1b4c2;
font-size: 0.9em;
position: absolute;
top: 0;
left: 0;
letter-spacing: 0.05em;
}
.screen .time {
animation-delay: 0.2s;
right: 0;
left: auto;
}
.screen .dials {
animation: show-dials 5s 1 ease-out forwards;
animation-fill-mode: forwards;
width: 4em;
height: 4em;
border-radius: 50%;
position: absolute;
top: 1.75em;
left: 0;
}
.screen .dial {
border: 1px solid #000;
border-radius: 50%;
}
.screen .dial.move {
position: absolute;
width: 8em;
height: 8em;
}
.screen .dial.move::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/1.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.29em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.move::after {
content: "";
background: #000;
border-radius: 50%;
width: 6em;
height: 6em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.move .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 4em;
overflow: hidden;
}
.screen .dial.move .wedge {
width: 4em;
height: 8em;
position: absolute;
top: 0;
left: 0;
}
.screen .dial.move .container1 {
left: 4em;
}
.screen .dial.move .container1 .wedge {
animation: rotate-bg-dial-1-1 5s 0.2s linear 1 forwards;
border-radius: 8em 0 0 8em;
background: #fc1d20;
left: -4em;
transform-origin: 100% 50%;
}
.screen .dial.move .container2 {
left: 0;
}
.screen .dial.move .container2 .wedge {
animation: rotate-bg-dial-1-2 5s 0.2s linear 1 forwards;
background: #fc1d20;
border-radius: 0 8em 8em 0;
transform-origin: 0 50%;
left: 4em;
}
.screen .dial.move .marker {
width: 1em;
height: 1em;
background: #fc1d20;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.5em);
}
.screen .dial.move .end {
animation: rotate-marker-dial-1 5s 0.2s linear 1 forwards;
transform-origin: 50% 4em;
}
.screen .dial.exercise {
position: absolute;
width: 6em;
height: 6em;
top: 1em;
left: 1em;
}
.screen .dial.exercise::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/2.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.29em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.exercise::after {
content: "";
background: #000;
border-radius: 50%;
width: 4em;
height: 4em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.exercise .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 3em;
overflow: hidden;
}
.screen .dial.exercise .wedge {
border-radius: 50%;
width: 3em;
height: 6em;
position: absolute;
}
.screen .dial.exercise .container1 {
left: 3em;
}
.screen .dial.exercise .container1 .wedge {
animation: rotate-bg-dial-2-1 5s .5s linear 1 forwards;
border-radius: 8em 0 0 8em;
position: absolute;
background: #9cfc33;
left: -3em;
transform-origin: 100% 50%;
}
.screen .dial.exercise .marker {
width: 1em;
height: 1em;
background: #9cfc33;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.48em);
}
.screen .dial.exercise .end {
animation: rotate-marker-dial-2 5s .5s linear 1 forwards;
transform-origin: 45% 3em;
}
.screen .dial.stand {
position: absolute;
width: 4em;
height: 4em;
top: 2em;
left: 2em;
}
.screen .dial.stand::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/3.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.28em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.stand::after {
content: "";
background: #000;
border-radius: 50%;
width: 2em;
height: 2em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.stand .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 4em;
overflow: hidden;
}
.screen .dial.stand .wedge {
border-radius: 50%;
width: 2em;
height: 4em;
position: absolute;
}
.screen .dial.stand .container1 {
left: 2em;
}
.screen .dial.stand .container1 .wedge {
position: absolute;
animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards;
background: #32cbd4;
border-radius: 8em 0 0 8em;
left: -2em;
transform-origin: 100% 50%;
}
.screen .dial.stand .marker {
width: 1em;
height: 1em;
background: #32cbd4;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.5em);
}
.screen .dial.stand .end {
animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards;
transform-origin: 50% 2em;
}
.screen .dial-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
}
.screen .dial-background.one {
background: #400818;
}
.screen .dial-background.two {
background: #2d400c;
}
.screen .dial-background.three {
background: #163d3b;
}
.pips {
animation: show-dials 5s 0.1s 1 ease-out forwards;
position: absolute;
bottom: 0;
left: calc(50% - 1em);
width: 2em;
}
.pips div {
width: 0.25em;
height: 0.25em;
background-color: #353535;
border-radius: 50%;
display: inline-block;
margin: 0 0.02em;
}
.pips div:first-child {
background-color: #fff;
}
/** Animations **/
@keyframes rotate-marker-dial-1 {
0%, 6% {
transform: none;
}
28%, 94% {
transform: rotateZ(220deg);
}
95%, 100% {
transform: none;
}
}
@keyframes rotate-bg-dial-1-1 {
0%, 6% {
transform: rotateZ(0);
}
24%, 94% {
transform: rotateZ(180deg);
}
95%, 100% {
transform: rotateZ(0);
}
}
@keyframes rotate-bg-dial-1-2 {
24% {
transform: rotateZ(0);
}
28%, 94% {
transform: rotateZ(40deg);
}
95%, 100% {
transform: rotateZ(0);
}
}
@keyframes rotate-marker-dial-2 {
20%, 90% {
transform: rotateZ(160deg);
}
91%, 100% {
transform: none;
}
}
@keyframes rotate-bg-dial-2-1 {
0%, 0.5% {
transform: none;
}
19%, 90% {
transform: rotateZ(160deg);
}
91%, 100% {
transform: none;
}
}
@keyframes rotate-marker-dial-3 {
19%, 90% {
transform: rotateZ(90deg);
}
91%, 100% {
transform: none;
}
}
@keyframes rotate-bg-dial-3-1 {
0%, 1% {
transform: none;
}
19%, 90% {
transform: rotateZ(90deg);
}
91%, 100% {
transform: none;
}
}
<section class="demo-container watch-container">
<article class="watch">
<div class="bg-image"></div>
<div class="screen">
<header>
<span class="title">Activity</span>
<span class="time">10:09</span>
</header>
<section class="dials">
<div class="dial move">
<div class="dial-background one"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="dial-container container2">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial exercise">
<div class="dial-background two"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial stand">
<div class="dial-background three"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
</section>
<section class="pips">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</article>
</section>
答案 0 :(得分:3)
每个@keyframes
动画都有一个最终的“关键帧”,在完成播放之前,它会重置为初始的“状态”。这是91%, 100%
周围的动画。删除每个动画的“重置”部分,并使常规动画关键帧在100%
处结束。
body {
background: #fff;
}
.watch {
background: #000 url(https://cssanimation.rocks/assets/images/posts/watch/watchbg.jpg) no-repeat;
background-size: 100%;
font-family: "San Francisco Display UltraLight", "Open Sans", Helvetica, Arial, Serif;
font-size: 32px;
width: 440px;
height: 487px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.screen {
width: 59.2%;
height: 74%;
position: absolute;
left: 18%;
top: 13%;
/**** DIAL 1 ****/
/**** DIAL 2 ****/
/**** DIAL 3 ****/
}
.screen .title, .screen .time {
animation: show-title 5s 1 ease-out forwards;
color: #b1b4c2;
font-size: 0.9em;
position: absolute;
top: 0;
left: 0;
letter-spacing: 0.05em;
}
.screen .time {
animation-delay: 0.2s;
right: 0;
left: auto;
}
.screen .dials {
animation: show-dials 5s 1 ease-out forwards;
animation-fill-mode: forwards;
width: 4em;
height: 4em;
border-radius: 50%;
position: absolute;
top: 1.75em;
left: 0;
}
.screen .dial {
border: 1px solid #000;
border-radius: 50%;
}
.screen .dial.move {
position: absolute;
width: 8em;
height: 8em;
}
.screen .dial.move::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/1.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.29em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.move::after {
content: "";
background: #000;
border-radius: 50%;
width: 6em;
height: 6em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.move .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 4em;
overflow: hidden;
}
.screen .dial.move .wedge {
width: 4em;
height: 8em;
position: absolute;
top: 0;
left: 0;
}
.screen .dial.move .container1 {
left: 4em;
}
.screen .dial.move .container1 .wedge {
animation: rotate-bg-dial-1-1 5s 0.2s linear 1 forwards;
border-radius: 8em 0 0 8em;
background: #fc1d20;
left: -4em;
transform-origin: 100% 50%;
}
.screen .dial.move .container2 {
left: 0;
}
.screen .dial.move .container2 .wedge {
animation: rotate-bg-dial-1-2 5s 0.2s linear 1 forwards;
background: #fc1d20;
border-radius: 0 8em 8em 0;
transform-origin: 0 50%;
left: 4em;
}
.screen .dial.move .marker {
width: 1em;
height: 1em;
background: #fc1d20;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.5em);
}
.screen .dial.move .end {
animation: rotate-marker-dial-1 5s 0.2s linear 1 forwards;
transform-origin: 50% 4em;
}
.screen .dial.exercise {
position: absolute;
width: 6em;
height: 6em;
top: 1em;
left: 1em;
}
.screen .dial.exercise::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/2.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.29em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.exercise::after {
content: "";
background: #000;
border-radius: 50%;
width: 4em;
height: 4em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.exercise .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 3em;
overflow: hidden;
}
.screen .dial.exercise .wedge {
border-radius: 50%;
width: 3em;
height: 6em;
position: absolute;
}
.screen .dial.exercise .container1 {
left: 3em;
}
.screen .dial.exercise .container1 .wedge {
animation: rotate-bg-dial-2-1 5s .5s linear 1 forwards;
border-radius: 8em 0 0 8em;
position: absolute;
background: #9cfc33;
left: -3em;
transform-origin: 100% 50%;
}
.screen .dial.exercise .marker {
width: 1em;
height: 1em;
background: #9cfc33;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.48em);
}
.screen .dial.exercise .end {
animation: rotate-marker-dial-2 5s .5s linear 1 forwards;
transform-origin: 45% 3em;
}
.screen .dial.stand {
position: absolute;
width: 4em;
height: 4em;
top: 2em;
left: 2em;
}
.screen .dial.stand::before {
background: url(https://cssanimation.rocks/assets/images/posts/watch/3.png) no-repeat center;
background-size: 50%;
content: "";
width: 1.5em;
height: 1.5em;
position: absolute;
top: -0.28em;
left: calc(50% - 0.75em);
z-index: 10;
}
.screen .dial.stand::after {
content: "";
background: #000;
border-radius: 50%;
width: 2em;
height: 2em;
position: absolute;
top: 1em;
left: 1em;
}
.screen .dial.stand .dial-container {
position: absolute;
top: 0;
bottom: 0;
width: 4em;
overflow: hidden;
}
.screen .dial.stand .wedge {
border-radius: 50%;
width: 2em;
height: 4em;
position: absolute;
}
.screen .dial.stand .container1 {
left: 2em;
}
.screen .dial.stand .container1 .wedge {
position: absolute;
animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards;
background: #32cbd4;
border-radius: 8em 0 0 8em;
left: -2em;
transform-origin: 100% 50%;
}
.screen .dial.stand .marker {
width: 1em;
height: 1em;
background: #32cbd4;
border-radius: 50%;
position: absolute;
top: 0;
left: calc(50% - 0.5em);
}
.screen .dial.stand .end {
animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards;
transform-origin: 50% 2em;
}
.screen .dial-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
}
.screen .dial-background.one {
background: #400818;
}
.screen .dial-background.two {
background: #2d400c;
}
.screen .dial-background.three {
background: #163d3b;
}
.pips {
animation: show-dials 5s 0.1s 1 ease-out forwards;
position: absolute;
bottom: 0;
left: calc(50% - 1em);
width: 2em;
}
.pips div {
width: 0.25em;
height: 0.25em;
background-color: #353535;
border-radius: 50%;
display: inline-block;
margin: 0 0.02em;
}
.pips div:first-child {
background-color: #fff;
}
/** Animations **/
@keyframes rotate-marker-dial-1 {
0%, 6% {
transform: none;
}
28%, 100% {
transform: rotateZ(220deg);
}
}
@keyframes rotate-bg-dial-1-1 {
0%, 6% {
transform: rotateZ(0);
}
24%, 100% {
transform: rotateZ(180deg);
}
}
@keyframes rotate-bg-dial-1-2 {
24% {
transform: rotateZ(0);
}
28%, 100% {
transform: rotateZ(40deg);
}
}
@keyframes rotate-marker-dial-2 {
20%, 100% {
transform: rotateZ(160deg);
}
}
@keyframes rotate-bg-dial-2-1 {
0%, 0.5% {
transform: none;
}
19%, 100% {
transform: rotateZ(160deg);
}
}
@keyframes rotate-marker-dial-3 {
19%, 100% {
transform: rotateZ(90deg);
}
}
@keyframes rotate-bg-dial-3-1 {
0%, 1% {
transform: none;
}
19%, 100% {
transform: rotateZ(90deg);
}
}
<section class="demo-container watch-container">
<article class="watch">
<div class="bg-image"></div>
<div class="screen">
<header>
<span class="title">Activity</span>
<span class="time">10:09</span>
</header>
<section class="dials">
<div class="dial move">
<div class="dial-background one"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="dial-container container2">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial exercise">
<div class="dial-background two"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
<div class="dial stand">
<div class="dial-background three"></div>
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
</section>
<section class="pips">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</article>
</section>