Мои анимации CSS не будут работать/не работают

Question

Для жизни меня не могу понять, что я делаю неправильно.

Это мой первый раз, когда я использовал CSS для анимации, так голый со мной.

Прямо сейчас я пытаюсь запустить несколько анимаций в то время на небольшом баннере. Изменение позиции с изменением непрозрачности в первой строке текста, простое изменение непрозрачности в другом и т. Д. Проблема в том, что первая анимация работает отлично, а вторая (и все после этого) никогда не запускается. Я использовал точно такой же код, как и в первом, и просто изменил имя анимации, а также класс, но он все еще не работает.

Это код, который я использовал для первых (H1 работает нормально, но h2, h3 и остальная часть анимации нет)

Мой 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> 

Мой CSS (Кстати, некоторые линии выше всего этого устанавливается как позиция: абсолютная)

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

Вы не закрыли эту @-webkit-keyframes mymove { установите этот флажок 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

Я предполагаю, что это происходит из об ошибке в коде CSS:

transform: opacity: 0; /* Syntax error there */ 
/* should be */ 
opacity: 0; 
transform: translate3d(0px, 0px, 0px); /* or whatever starting value you want */ 

Следует также отметить, что вы приставкой в ​​ключевые кадры анимации (@-webkit-keyframes mymove), это может работать только на браузерах на основе wekbit.

Последняя фигурная скобка отсутствует, но это не считается ошибкой (последняя скобка/точка с запятой не является обязательной).