CSS3 Анимация Вопрос - PullRequest
Новая
       6

CSS3 Анимация Вопрос

2 голосов
/ 09 февраля 2010

Как сделать так, чтобы анимация CSS3 воспроизводилась до конца, а затем останавливалась. Я не хочу, чтобы он возвращал преобразуемые элементы обратно в их начальные состояния.

Сейчас я использую некоторый javascript для добавления класса к элементу после анимации с теми же свойствами, что и 100% в анимации.

Ответы [ 5 ]

7 голосов
/ 01 декабря 2011

Это возможно с помощью «animation-fill-mode», определенного как «forwards», по крайней мере, в Webkit. Я получил этот результат с кодом, подобным этому: 

@-webkit-keyframes test {
  100% { background-color: #0000ff; }
} 

a { background-color: #ff0000; }

a:hover { -webkit-animation: test 1s 1 ease forwards }

Обратите внимание, что указывать начальный цвет в ключевом кадре 0% и конечный цвет в: hover необязательно.

Конечно, этот код специфичен для Webkit. Я не пробовал в других браузерах с префиксами других поставщиков или с общим свойством «animation».

2 голосов
/ 03 июня 2011

поместите ваши конечные значения в основной класс CSS и начальные значения в ключевых кадрах анимации в 0%: 

@keyframes test {
  0% {
    background-color: #ff0000; /* start value */
  }
  100% {
    background-color: #0000ff;
  } 
}

a {
  background-color: #ff0000; /* normal state */
}

a:hover {
  animation-name: test;
  animation-duration: 1s;
  background-color: #ff0000; /* final state, after animation is finished */
}
0 голосов
/ 22 июля 2013

анимация-режим заполнения: вперед Свойство CSS animation-fill-mode указывает, как CSS-анимация должна применять стили к своей цели до и после ее выполнения

0 голосов
/ 12 февраля 2012

с помощью CSS3 Animation вы можете установить количество итераций анимации равным 1, 2 или бесконечным http://dev.w3.org/csswg/css3-animations/#animation-iteration-count

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
width:100px;
height:100px;
background:black;
position:relative;
animation:mymove 8s 1;
-moz-animation:mymove 8s 1; /* Firefox */
-webkit-animation:mymove 8s 1; /*Safari and Chrome*/
}

@keyframes mymove
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>

<div></div>

</body>
</html>

Вот также хороший пример анимации CSS3 с кошкой: http://www.jaider.net/405-neko-the-cat-html5-css3-animation/

0 голосов
/ 23 июня 2010

В случае, если этот вопрос все еще открыт, я не думаю, что это возможно при использовании анимации CSS3, поскольку они в настоящее время указаны :

Анимация не влияет наВычисленное значение до применения анимации, до истечения задержки анимации и после окончания анимации.

Однако вы должны иметь возможность использовать переходы CSS3 для базовых эффектов.В презентации html5rocks.com есть слайд , который показывает, как это сделать.Вот соответствующая [перефразированная] выдержка: 

#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }

// Run this to animate to the left
document.getElementById('box').className = 'left';

// Run this to animate to the right
document.getElementById('box').className = 'right';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...