How to manage multiple simultaneous CSS animations - html

Question

I'm trying to get several animations running at the time in a small banner. A change of position with an opacity change in the first line of text, a simple opacity change in another one and so on. The problem is that the first animation works perfectly and the second one (and everything after that) never runs. I used exactly the same code as in the first one and just changed the name of the animation as well as the class but it's still not working.
This is the code I used for the first ones, (H1 works just fine but h2, h3 and the rest of the animation don't)
My HTML
<h1> Smart travel,
<br> at your fingertips. </h1>
<h2> Our app for Iphone and Ipad is here </h2>
<h3><strong>Download </strong> it today. </h3>
My CSS (By the way, some lines above all of this is set up as position: absolute)
h1 {
position: relative;
right: 0px;
-webkit-animation: mymove 1s ; /* Chrome, Safari, Opera */
animation: mymove 1s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
transform: opacity: 0;
}
25% {transform: translate3d(90px, 0px, 0px);
opacity:0;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 100;
}
h2 {
position: relative;
-webkit-animation: mymove2 3s ; /* Chrome, Safari, Opera */
animation: mymove2 3s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove2 {
0% {
opacity: 0;
}
50% {
opacity:0;
}
100% {
opacity: 100;
}

Answer 1

You didn't close this #-webkit-keyframes mymove { Check this fiddle
h1 {
position: relative;
right: 0px;
-webkit-animation: mymove 1s;
/* Chrome, Safari, Opera */
animation: mymove 1s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
transform: opacity: 0;
}
25% {
transform: translate3d(90px, 0px, 0px);
opacity:0;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 100;
}
}
h2 {
position: relative;
-webkit-animation: mymove2 3s;
/* Chrome, Safari, Opera */
animation: mymove2 3s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove2 {
0% {
opacity: 0;
}
50% {
opacity:0;
}
100% {
opacity: 100;
}
<h1> Smart travel,
<br> at your fingertips. </h1>
<h2> Our app for Iphone and Ipad is here </h2>
<h3><strong>Download </strong> it today. </h3>

Answer 2

I guess this comes from an error in your CSS code :
transform: opacity: 0; /* Syntax error there */
/* should be */
opacity: 0;
transform: translate3d(0px, 0px, 0px); /* or whatever starting value you want */
You should also note that you have prefixed the keyframes of your animation (#-webkit-keyframes mymove), this can only work on wekbit based browsers.
The last brace is missing, but it's not considered as an error (the last brace / semicolon are optional).