我正在用 CSS 动画制作一个呼吸圈。
Circle Expanding = “Breath In”
Circle Retains Size = "Hold"
圆收缩 = "Breath Out"
一旦圆圈达到动画的 100%,我希望内容切换到“Breath Out”,但它永远不会。我如何让内容从“保持”切换到“呼出”?
@import "compass/css3";
.circle {
background: purple;
width: 500px;
height: 500px;
margin: auto;
border-radius: 100%;
overflow: hidden;
-webkit-animation: grow 5s 1;
animation-iteration-count:infinite;
text-align: center;
display: block;
line-height: 450px;
font-size: 60px;
}
.text::before {
-webkit-animation: grow 5s 1;
animation-iteration-count:infinite;
content: '';
}
@-webkit-keyframes grow {
0% {
-webkit-transform: scale( .5);
-moz-transform: scale( .5);
-o-transform: scale( .5);
-ms-transform: scale( .5);
transform: scale( .5);
content: 'Breath In';
}
40% {
-webkit-transform: scale( 1);
-moz-transform: scale( 1);
-o-transform: scale( 1);
-ms-transform: scale( 1);
transform: scale( 1);
}
60% {
-webkit-transform: scale( 1);
-moz-transform: scale( 1);
-o-transform: scale( 1);
-ms-transform: scale( 1);
transform: scale( 1);
content: 'Hold';
}
100% {
-webkit-transform: scale( 0.5);
-moz-transform: scale( 0.5);
-o-transform: scale( 0.5);
-ms-transform: scale( 0.5);
transform: scale( 0.5);
content: 'Breath out';
}
}
<div class="circle">
<div class="text"></div>
</div>
最佳答案
我认为这是因为您为主要元素和伪元素定义了相同的动画,这会产生问题。相反,您应该在主元素上保留缩放动画,在伪元素上保留内容动画。
你只用前缀 -webkit-
定义了你的动画,你应该删除它
.circle {
background: purple;
width: 500px;
height: 500px;
margin: auto;
border-radius: 100%;
overflow: hidden;
animation: grow 5s 1;
animation-iteration-count: infinite;
text-align: center;
display: block;
line-height: 450px;
font-size: 60px;
}
.text::before {
animation: grow-content 5s 1;
animation-iteration-count: infinite;
content: '';
}
@keyframes grow {
0% {
transform: scale( 0.5);
}
40% {
transform: scale( 1);
}
60% {
transform: scale( 1);
}
100% {
transform: scale( 0.5);
}
}
@keyframes grow-content {
0%, 40% {
content: 'Breath In';
}
41%, 60% {
content: 'Hold';
}
61%, 100% {
content: 'Breath out';
}
}
<div class="circle">
<div class="text"></div>
</div>
关于CSS3 改变动画中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50900962/