CSS3 改变动画中的内容

Question

我正在用 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>

http://jsfiddle.net/gh9xtu6q/2/

Answer 1

我认为这是因为您为主要元素和伪元素定义了相同的动画，这会产生问题。相反，您应该在主元素上保留缩放动画，在伪元素上保留内容动画。

你只用前缀 -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>