Остановить CSS анимацию
Помогите решить вопрос, или подскажите как остановить css анимацию. Есть такой вот прелоадер, нужно оставить анимацию когда виден весь круг точек и запустить по событию(например добавление класса в контейнер).
.holder < position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: #2D2F48; >.preloader < /* size */ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); animation: rotatePreloader 2s infinite ease-in; >@keyframes rotatePreloader < 0% < transform: translateX(-50%) translateY(-50%) rotateZ(0deg); >100% < transform: translateX(-50%) translateY(-50%) rotateZ(-360deg); >> .preloader div < position: absolute; width: 100%; height: 100%; opacity: 0; >.preloader div:before < content: ""; position: absolute; left: 50%; top: 0%; width: 10%; height: 10%; background-color: #ffffff; transform: translateX(-50%); border-radius: 50%; >.preloader div:nth-child(1) < transform: rotateZ(0deg); animation: rotateCircle1 2s infinite linear; z-index: 9; >@keyframes rotateCircle1 < 0% < opacity: 0; >0% < opacity: 1; transform: rotateZ(36deg); >7% < transform: rotateZ(0deg); >57% < transform: rotateZ(0deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(2) < transform: rotateZ(36deg); animation: rotateCircle2 2s infinite linear; z-index: 8; >@keyframes rotateCircle2 < 5% < opacity: 0; >5.0001% < opacity: 1; transform: rotateZ(0deg); >12% < transform: rotateZ(-36deg); >62% < transform: rotateZ(-36deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(3) < transform: rotateZ(72deg); animation: rotateCircle3 2s infinite linear; z-index: 7; >@keyframes rotateCircle3 < 10% < opacity: 0; >10.0002% < opacity: 1; transform: rotateZ(-36deg); >17% < transform: rotateZ(-72deg); >67% < transform: rotateZ(-72deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(4) < transform: rotateZ(108deg); animation: rotateCircle4 2s infinite linear; z-index: 6; >@keyframes rotateCircle4 < 15% < opacity: 0; >15.0003% < opacity: 1; transform: rotateZ(-72deg); >22% < transform: rotateZ(-108deg); >72% < transform: rotateZ(-108deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(5) < transform: rotateZ(144deg); animation: rotateCircle5 2s infinite linear; z-index: 5; >@keyframes rotateCircle5 < 20% < opacity: 0; >20.0004% < opacity: 1; transform: rotateZ(-108deg); >27% < transform: rotateZ(-144deg); >77% < transform: rotateZ(-144deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(6) < transform: rotateZ(180deg); animation: rotateCircle6 2s infinite linear; z-index: 4; >@keyframes rotateCircle6 < 25% < opacity: 0; >25.0005% < opacity: 1; transform: rotateZ(-144deg); >32% < transform: rotateZ(-180deg); >82% < transform: rotateZ(-180deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(7) < transform: rotateZ(216deg); animation: rotateCircle7 2s infinite linear; z-index: 3; >@keyframes rotateCircle7 < 30% < opacity: 0; >30.0006% < opacity: 1; transform: rotateZ(-180deg); >37% < transform: rotateZ(-216deg); >87% < transform: rotateZ(-216deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(8) < transform: rotateZ(252deg); animation: rotateCircle8 2s infinite linear; z-index: 2; >@keyframes rotateCircle8 < 35% < opacity: 0; >35.0007% < opacity: 1; transform: rotateZ(-216deg); >42% < transform: rotateZ(-252deg); >92% < transform: rotateZ(-252deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(9) < transform: rotateZ(288deg); animation: rotateCircle9 2s infinite linear; z-index: 1; >@keyframes rotateCircle9 < 40% < opacity: 0; >40.0008% < opacity: 1; transform: rotateZ(-252deg); >47% < transform: rotateZ(-288deg); >97% < transform: rotateZ(-288deg); >100% < transform: rotateZ(-324deg); opacity: 1; >> .preloader div:nth-child(10) < transform: rotateZ(324deg); animation: rotateCircle10 2s infinite linear; z-index: 0; >@keyframes rotateCircle10 < 45% < opacity: 0; >45.0009% < opacity: 1; transform: rotateZ(-288deg); >52% < transform: rotateZ(-324deg); >102% < transform: rotateZ(-324deg); >100% < transform: rotateZ(-324deg); opacity: 1; >>Честно, старался, но ничего путного не нашел. Возможно ли это?
Как остановить анимацию CSS в текущей позиции при наведении?
У меня есть div внутри, который перемещает другой div. Мне нужно остановить .block в текущем положении, когда я нахожусь на .container . Как это сделать? HTML:
.container < width: 200px; height: 100px; padding: 10px; border: 1px solid #000; position: relative; >.block < width: 100px; height: 100px; background: red; position: absolute; animation: move 2s linear infinite; >@keyframes move < 0% < left: 10px; >25% < left: 50px; >50% < left: 100px; >75% < left: 50px; >100% < left: 10px; >> Ihor Tkachuk 20 окт. 2015, в 15:38
Как остановить анимацию SVG при нажатии на кнопку?
У меня есть SVG-анимация, и я пытаюсь понять, как остановить и заморозить SVG в поле зрения сразу после завершения анимационной последовательности. Таким образом, логотип остается на странице до обновления следующей страницы и т.д. Demo
*, *:before, *:after < box-sizing: border-box; margin: 0; padding: 0; >.pin < position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; width: 120px; height: 120px; overflow: visible; >.pin__group < -webkit-transform-origin: 30px 30px; transform-origin: 30px 30px; -webkit-animation: group-anim 8s 1s infinite; animation: group-anim 8s 1s infinite; >.pin__grayGroup < -webkit-animation: gray-anim 8s 1s infinite; animation: gray-anim 8s 1s infinite; >.pin__square < stroke: #B8B8B8; stroke-dasharray: 240, 240; stroke-dashoffset: 240; -webkit-animation: square-anim 8s 1s infinite; animation: square-anim 8s 1s infinite; >.pin__line < stroke: #B8B8B8; stroke-dasharray: 60, 60; stroke-dashoffset: 60; >.pin__line-1 < -webkit-animation: line-anim 8s 0.6s infinite; animation: line-anim 8s 0.6s infinite; >.pin__line-2 < -webkit-animation: line-anim 8s 0.8s infinite; animation: line-anim 8s 0.8s infinite; >.pin__line-3 < -webkit-animation: line-anim 8s 1s infinite; animation: line-anim 8s 1s infinite; >.pin__circleBig < stroke: #B8B8B8; stroke-dasharray: 188.522, 188.522; stroke-dashoffset: 188.522; -webkit-animation: bigCircle-anim 8s 1s infinite; animation: bigCircle-anim 8s 1s infinite; >.pin__circleSmall < stroke: #B8B8B8; stroke-dasharray: 94.261, 94.261; stroke-dashoffset: 94.261; -webkit-animation: smallCircle-anim 8s 1s infinite; animation: smallCircle-anim 8s 1s infinite; >.pin__outer < stroke: #00CD73; fill: transparent; stroke-dasharray: 201.391, 201.391; stroke-dashoffset: 201.391; -webkit-animation: outer-anim 8s 1s infinite; animation: outer-anim 8s 1s infinite; >.pin__inner < stroke: #00CD73; fill: transparent; stroke-dasharray: 94.261, 94.261; stroke-dashoffset: 94.261; -webkit-animation: inner-anim 8s 1s infinite; animation: inner-anim 8s 1s infinite; >@-webkit-keyframes square-anim < 15% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @keyframes square-anim < 15% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @-webkit-keyframes line-anim < 23% < stroke-dashoffset: 60; >30% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @keyframes line-anim < 23% < stroke-dashoffset: 60; >30% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @-webkit-keyframes bigCircle-anim < 30% < stroke-dashoffset: 188.522; >43% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @keyframes bigCircle-anim < 30% < stroke-dashoffset: 188.522; >43% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @-webkit-keyframes smallCircle-anim < 43% < stroke-dashoffset: 94.261; >53% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @keyframes smallCircle-anim < 43% < stroke-dashoffset: 94.261; >53% < stroke-dashoffset: 0; >100% < stroke-dashoffset: 0; >> @-webkit-keyframes group-anim < 53% < -webkit-transform: rotate(0); transform: rotate(0); >61% < -webkit-transform: rotate(45deg); transform: rotate(45deg); >94% < -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; >100% < -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; >> @keyframes group-anim < 53% < -webkit-transform: rotate(0); transform: rotate(0); >61% < -webkit-transform: rotate(45deg); transform: rotate(45deg); >94% < -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; >100% < -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; >> @-webkit-keyframes outer-anim < 61% < stroke-dashoffset: 201.391; >71% < stroke-dashoffset: 0; >79% < stroke-dashoffset: 0; fill: transparent; >94% < stroke-dashoffset: 0; fill: #00CD73; >100% < stroke-dashoffset: 0; fill: #00CD73; >> @keyframes outer-anim < 61% < stroke-dashoffset: 201.391; >71% < stroke-dashoffset: 0; >79% < stroke-dashoffset: 0; fill: transparent; >94% < stroke-dashoffset: 0; fill: #00CD73; >100% < stroke-dashoffset: 0; fill: #00CD73; >> @-webkit-keyframes inner-anim < 71% < stroke-dashoffset: 94.261; >79% < stroke-dashoffset: 0; fill: transparent; >94% < stroke-dashoffset: 0; fill: white; >100% < stroke-dashoffset: 0; fill: white; >> @keyframes inner-anim < 71% < stroke-dashoffset: 94.261; >79% < stroke-dashoffset: 0; fill: transparent; >94% < stroke-dashoffset: 0; fill: white; >100% < stroke-dashoffset: 0; fill: white; >> @-webkit-keyframes gray-anim < 53% < opacity: 1; >79% < opacity: 0.2; >94% < opacity: 0; >100% < opacity: 0; >> @keyframes gray-anim < 53% < opacity: 1; >79% < opacity: 0.2; >94% < opacity: 0; >100% < opacity: 0; >>Я могу удалить свойство infinite , чтобы запустить анимацию один раз, но вопрос в том, как можно остановить анимацию сразу после нажатия кнопки?
Как остановить css анимацию?
Доброго всем дня, впервые столкнулся с css анимацией. вроде бы все работает, но она бегает по кругу а мне нужно что бы после показа последнего слайда она остановилась. Ну или как я пробовал остановить на 14-й секунде. Понимаю что вопрос мелочный, и ошибка перед носом, тыкните неопытного)
- Вопрос задан более трёх лет назад
- 1434 просмотра
3 комментария
Оценить 3 комментария
Александр Ружевич @ruzhevich Автор вопроса
Алексей Тен: спасибо что откликнулись, она проигрывается уже один раз но останавливается на первом кадре а мне нужно на последнем)
Решения вопроса 1
kravchenko-me @kravchenko-me
она проигрывается уже один раз но останавливается на первом кадре а мне нужно на последнем)
Ответ написан более трёх лет назад
Александр Ружевич @ruzhevich Автор вопроса
все равно на первом останавливается(
Александр Ружевич @ruzhevich Автор вопроса
понимаю вопрос глупый, но я устал с ней играться, глядя на мой код скажите к какому именно элементу нужно применять свойство анимации, а то я уже его куда хочешь ставил, ноль эмоций, анимация не слушается
div -webkit-animation: fade 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: fade 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
>
#fade -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
>
.slide position:absolute;
-webkit-animation: fade 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: fade 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
>