css анимация не работает

Я просто пытаюсь реализовать учебник в веб-дизайне, но он, похоже, не работает. Предполагается, что это «развлекательная анимация загрузки для лучшего UX». Я пробовал его в Chrome 49.0.2623.87 m и Firefox 46.0.1. Кто-нибудь видит ошибку, пожалуйста?css анимация не работает

HTML:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="testcss2.css"></link> 
</head> 
<body> 
<section id="loading"> 
<div><span></span></div> 
</section> 
</body> 
</html>

CSS:

html, body,#loading { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#loading > * { 
    position: relative; 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid red; 
} 

#loading > * { 
    -webkit-animation-name: loadAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 2s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > * { 
    display: block; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    border: 5px solid gray; 
} 

#loading > * > * { 
    -webkit-animation-name: loadAnim; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -animation-name: loadAnim; 
    -animation-duration: 4s; 
    -animation-iteration-count: infinite; 
} 

#loading > * > @-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
    @keyframes loadAnim { 
     from { transform: rotate(0deg);} 
     to { transform: rotate(360deg);} 
    } 
}

источник

2016-05-17 LauraNMS

Во-первых, стандартные свойства не имеют '-' перед ними. Во-вторых, неправильная структура вложенности правил ключевых кадров. В-третьих, вы не должны добавлять селекторов типа '#loading> *>' перед '@ -webkit-keyframes', поскольку он не имеет никакого значения. Исправляя все это, ваш код должен работать. – Harry

Вам не нужно #loading > * > перед вами анимации кода. Изменение его это делает трюк:

@-webkit-keyframes loadAnim { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes loadAnim { 
    from { transform: rotate(0deg);} 
    to { transform: rotate(360deg);} 
}

Смотрите эту скрипку в качестве справки: https://jsfiddle.net/y8q3wdv9/

источник

2016-05-17 16:20:50 Keiwan

* спасибо *! Я не понимаю, почему они оставили это в журнале. – LauraNMS

@keyframes loadAnim {} не должен быть встроен в @-webkit-keyframes loadAnim {}
В animation свойства не должны иметь - перед из них.

https://jsfiddle.net/Lh2dyft9/

источник

2016-05-17 16:36:36 johnniebenson

css анимация не работает

ответ

Смежные вопросы