How to assign to the same element two CSS3 animations

Question

How to assign to the same element two CSS3 animations

Navigation

#1 by (9 votes)

9

I'm trying to make an animation of div that the first 2 seconds appear and position itself in the center of the page and once this animation is finished, it executes a second animation that consists of rotating this div 360 degrees infinitely.

The problem I have is that I do not find or know how to define two types of Animations in the same element (or that one is triggered when the first one is finished).

.bloqueAlargado {
   width: 100px;
   height: 400px;
   background-color: blue; 
   font-weight: bold;
   position: relative;
   -webkit-animation-name: mymove2 2s; /*Animacion 1*/
   animation-name: mymove2 ;
   animation-duration: 2s;
   left : 36em;
   animation-name: rotacion;  /*Animacion 2*/
   animation-duration: 4s;
   animation-iteration-count: infinite;    
}


    @-webkit-keyframes mymove2 {
            from {left: 0em;}
            to {left: 36em;}
    }

    /* Standard syntax */
    @keyframes mymove2 {
            from {left: 0em;}
            to {left: 36em;}
    }

    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes rotacion {
        0% {
            transform: rotate(0deg);

        }
        100% {
            transform: rotate(-360deg);

        }

    }

    @keyframes rotacion {
        0% {
                transform: rotate(0deg);

        }
        100% {
                transform: rotate(-360deg);

        }
    }

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>TRANSICIONES</title>

</head>
<body>
    <h1 class ="AnimacionBasica">Animacion Basica</h1>

    <div class="bloqueAlargado"></div>
</body>
</html>

css3 css

asked by PictorGames 18.01.2017 в 15:51

source

1 answer

In linux, can a file or directory belong to more than one group? Crash cycle?

score 9 · Accepted Answer

If you want both animations to run simultaneously, you must declare them separated by a comma.

animation: rotacion 1s, mymove2 3s;

Example:

.bloqueAlargado {
  width: 100px;
  height: 400px;
  background-color: blue;
  font-weight: bold;
  position: relative;
  left: 36em;
  animation: rotacion 4s infinite, mymove2 2s infinite;
}
@-webkit-keyframes mymove2 {
  from {
    left: 0em;
  }
  to {
    left: 36em;
  }
}
/* Standard syntax */

@keyframes mymove2 {
  from {
    left: 0em;
  }
  to {
    left: 36em;
  }
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

Then if you want to load them in sequence, it's more complicated. You must coordinate the keyframes so that they occupy the correct time: Where you give half of the total time to one of the animations and the other half to the other using the percentages.

@keyframes mymove2 {
  0% { 
    left: 0em;
  }
  50% { /* el primer 50% del tiempo esta animacion no hace nada */
    left: 0em;
  }
  100% {
    left: 36em;
  }
}


@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  50% { /* el ultimo 50% del tiempo esta animacion no hace nada */
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

Example:

.bloqueAlargado {
  width: 100px;
  height: 400px;
  background-color: blue;
  font-weight: bold;
  position: relative;
  left: 36em;
  animation: rotacion 4s infinite, mymove2 4s infinite;
}

@keyframes mymove2 {
  0% { 
    left: 0em;
  }
  50% {
    left: 0em;
  }
  100% {
    left: 36em;
  }
}


@keyframes rotacion {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>TRANSICIONES</title>

</head>

<body>
  <h1 class="AnimacionBasica">Animacion Basica</h1>

  <div class="bloqueAlargado"></div>
</body>

</html>

EDITION:

... or that one is triggered when the first one is finished

As for that, to activate one when the other ends, javascript is required. If you do not want to use it, look at the solution above that uses coordinated keyframes.