我用CSS动画做了一个呼吸圈。
Circle Expanding = "Breath In"
Circle Retains Size = "Hold"
Circle Shrinks = "Breath Out"
一旦圆圈达到动画的100%,我希望内容切换到"呼出"它永远不会。如何从#34; Hold"切换内容?到#34;呼出"?
@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>
&#13;
答案 0 :(得分:4)
我认为这是因为你已经为主元素和伪元素定义了相同的动画,这就产生了一个问题。相反,您应该将缩放动画保留在主元素上,将内容动画保留在伪元素上。
您已定义仅包含前缀-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';
}
}
&#13;
<div class="circle">
<div class="text"></div>
</div>
&#13;
答案 1 :(得分:0)
您可以使用<span>
标记而不是伪元素添加文本。这是一个更多的CSS,但它会让你更多地控制时间,并使其更容易转换其他属性(颜色,位置等)。
@import "compass/css3";
.circle {
background: purple;
width: 500px;
height: 500px;
margin: auto;
border-radius: 100%;
overflow: hidden;
animation: grow 5s 1;
animation-iteration-count: infinite;
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
color: white;
font-size: 60px;
font-family: sans-serif;
animation: changeText 5s;
}
.text span {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.text-in,
.text-hold,
.text-out {
opacity: 0;
}
.text-in {
animation: breatheIn 5s infinite;
}
.text-hold {
animation: breatheHold 5s infinite;
}
.text-out {
animation: breatheOut 5s infinite;
}
@keyframes breatheIn {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
30% {
opacity: 1;
}
35% {
opacity: 0;
}
}
@keyframes breatheHold {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
40% {
opacity: 1;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes breatheOut {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
73% {
opacity: 1;
}
}
@-webkit-keyframes grow {
0% {
-webkit-transform: scale( .5);
-moz-transform: scale( .5);
-o-transform: scale( .5);
-ms-transform: scale( .5);
transform: scale( .5);
}
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);
}
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);
}
}
<div class="circle">
<div class="text">
<span class="text-in">Breath In</span>
<span class="text-hold">Hold</span>
<span class="text-out">Breath Out</span>
</div>
</div>