#css #css-animations
#css #css-анимация
Вопрос:
Я пытаюсь сделать простую анимацию CSS
Смотрите скрипку: http://jsfiddle.net/xT8z9 /
Мне нужно, чтобы значение ширины оставалось равным 100%, но из-за анимации оно возвращается к 0%.
@-webkit-keyframes meter1 {
0% {
width:0%;
}
100% {
width:100%;
}
}
Как мне это исправить, нужен ли для этого javascript или jquery?
Приветствую, Крис
Комментарии:
1. В HTML-файле вашей скрипки отсутствует закрывающий тег, я вообще не вижу ничего анимированного
2. с закрывающим тегом : jsfiddle.net/xT8z9/1
Ответ №1:
Измените значение animation-fill-mode на forwards , чтобы сохранить конечное состояние.
.meter > span {
display: block;
width:0px;
height: 3px;
background-color:#0f0;
position:relative;
top:9px;
animation: meter1 1s 1s ease forwards;
-webkit-animation: meter1 1s 1s ease forwards;
-moz-animation: meter1 1s 1s ease forwards;
-o-animation: meter1 1s 1s ease forwards;
-ms-animation: meter1 1s 1s ease forwards;
}