freeCodeCamp

3.1 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl
587d78a8367417b2b2512ae4	Make a CSS Heartbeat using an Infinite Animation Count	Haz un Heartbeat CSS usando un conteo de animaciones infinitas	0

Description

Aquí hay otro ejemplo de animación continua con la propiedad de animation-iteration-count que usa el corazón que diseñó en un desafío anterior. La animación de un segundo de latido del corazón consta de dos piezas animadas. Los elementos del heart (que incluyen :before y :after piezas) se animan para cambiar el tamaño con la propiedad de transform , y la div fondo se anima para cambiar su color con la propiedad de background .

Instructions

Mantenga el corazón latiendo agregando la propiedad de animation-iteration-count para la clase de back y la clase de heart y estableciendo el valor en infinito. El heart:before y heart:after selectores heart:after no necesitan propiedades de animación.

Tests

tests:
  - text: La propiedad de <code>animation-iteration-count</code> para la clase de <code>heart</code> debe tener un valor infinito.
    testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
  - text: La propiedad <code>animation-iteration-count</code> para la clase <code>back</code> debe tener un valor infinito.
    testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'

Challenge Seed

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;

  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;

  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

Solution

// solution required

3.1 KiB Raw Blame History