Проблема с анимацией анимации @keyframe в css

Я пробовал анимацию в CSS, но получил проблему, которая не работает. Вот моего fiddle Проблема с анимацией анимации @keyframe в css

ul { 
    display: block; 
} 
ul>li { 
    list-style-type: none; 
    transition: all 0.5s ease-out; 
} 
ul>li:nth-child(1) { 
    height:100px; 
    width: 100px; 
    background: transparent; 
    border-radius: 100%; 
    border:solid 5px #00f; 
    border-right: transparent; 
    border-left: transparent; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left:0; 
    margin: auto; 
    animation: spin 1s infinite ease-out; 
} 
ul>li:nth-child(2) { 
    height:75px; 
    width: 75px; 
    background: transparent; 
    border-radius: 100%; 
    border:solid 5px #0f0; 
    border-top: transparent; 
    border-bottom: transparent; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left:0; 
    margin: auto; 
    animation: spin2 1s infinite ease-out; 
} 
ul>li:nth-child(3) { 
    height:50px; 
    width: 50px; 
    background: transparent; 
    border-radius: 100%; 
    border:solid 5px #f00; 
    border-left: transparent; 
    border-right: transparent; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left:0; 
    margin: auto; 
    animation: spin3 1s infinite ease-out; 
} 
@keyframes spin1 { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
} 
@keyframes spin2 { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
} 
@keyframes spin3 { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
}

источник

2015-02-26 vivek

Пожалуйста, измените свой вопрос и более конкретно о том, что не работает, и что вы ожидаете. – usr1234567

Попробуйте добавить префиксы для браузера сказать '-webkit-animation' – anpsmn

Я пробовал, но все еще не работает. – vivek

Добавьте browser prefixes и вы используете имя анимации закрутку для первого лития, который не существует.

ul { 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     margin: 0 auto; 
 
    } 
 
    ul>li { 
 
     list-style-type: none; 
 
    } 
 
    ul>li:nth-child(1) { 
 
     height:100px; 
 
     width: 100px; 
 
     background: transparent; 
 
     border-radius: 100%; 
 
     border:solid 5px #00f; 
 
     border-right: transparent; 
 
     border-left: transparent; 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left:0; 
 
     margin: auto; 
 
     -webkit-animation: spin1 5s infinite ease-out; 
 
     animation: spin1 5s infinite ease-out; 
 
    } 
 
    ul>li:nth-child(2) { 
 
     height:75px; 
 
     width: 75px; 
 
     background: transparent; 
 
     border-radius: 100%; 
 
     border:solid 5px #0f0; 
 
     border-top: transparent; 
 
     border-bottom: transparent; 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left:0; 
 
     margin: auto; 
 
     -webkit-animation: spin2 5s infinite ease-out; 
 
     animation: spin2 5s infinite ease-out; 
 
    } 
 
    ul>li:nth-child(3) { 
 
     height:50px; 
 
     width: 50px; 
 
     background: transparent; 
 
     border-radius: 100%; 
 
     border:solid 5px #f00; 
 
     border-left: transparent; 
 
     border-right: transparent; 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left:0; 
 
     margin: auto; 
 
     -webkit-animation: spin3 5s infinite ease-out; 
 
     animation: spin3 5s infinite ease-out; 
 
    } 
 
    @-webkit-keyframes spin1 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 
    @-webkit-keyframes spin2 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 
    @-webkit-keyframes spin3 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 
    @keyframes spin1 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 
    @keyframes spin2 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    } 
 
    @keyframes spin3 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     100% { 
 
      transform: rotate(360deg); 
 
     } 
 
    }

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

источник

2015-02-26 06:06:58 anpsmn

Проблема с анимацией анимации @keyframe в css

ответ

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