Остановить анимацию и начать переход при зависании

У меня есть ссылка, которая запускает бесконечную анимацию с цветом фона. Я хочу остановить анимацию и перейти на другой цвет фона при наведении.

.startlink{
    background-color:#206a9e;
    color:#fff;
    border-radius:15px;
    font-family: 'Myriad Pro';
    -webkit-animation:changeColor 3.4s infinite;
    -webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
    -webkit-animation-play-state: paused;
    background-color: #014a2a;
}

@-webkit-keyframes changeColor 
{
    0%   {background:#206a9e;}
    50%  {background:#012c4a;}
    100%   {background:#206a9e;}
}

Почему этот код не работает? И есть ли альтернативный способ сделать это? (желательно без Javascript).

Ответ 1

Try -webkit-animation: 0; , Демо здесь. 0 - значение по умолчанию для animation или то, что вы должны установить для отключения любых существующих анимаций CSS3.

Ответ 2

-webkit-animation-play-state: приостановлено а также -webkit-animation-play-state: running

Ответ 3

Нашел другой путь для достижения этого.

Напишите еще одну последовательность ключевого кадра анимации и вызовите ее при наведении.

.startlink{
background-color:#206a9e;
color:#fff;
border-radius:15px;
font-family: 'Myriad Pro';
-webkit-animation:changeColor 3.4s infinite;
-webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
-webkit-animation:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}

Ответ 4

У меня такая же проблема, и решение, которое я нашел, следующее.

Создайте нужную анимацию и для элемента, который вы и каждый присваиваете каждому другому классу.

Затем используйте . mouseover() или . mouseenter() события jQuery переключаются между классами, назначенными каждой анимации.

Он похож на то, что вы используете для меню гамбургера, просто с другим обработчиком.

Ответ 5

Для тех, кому интересно анимационный слайд с остановкой между двумя изображениями

var NumImg = 1; //Img Number to show
var MaxImg = 3; //How many Img in directory ( named 1.jpg,2.jpg ...)

function AnimFond() {
  NumImg = NumImg> MaxImg ? 1 : NumImg +=1;
  var MyImage = "http://startinbio.com/Lib/Images/Fond/" + NumImg + ".jpg";
  $("#ImgFond1").attr("src", MyImage);
  $("#ImgFond2").fadeOut(3000, function() {
    $("#ImgFond2").attr("src", MyImage);
    $("#ImgFond2").fadeIn(1);
  });
}

setInterval("AnimFond()", 10000); //delay between 2 img

#AnimFond {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0 0 0 -8;
}

#AnimFond img {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="AnimFond">
  <img id="ImgFond1" src="http://startinbio.com/Lib/Images/Fond/1.jpg" />
  <img id="ImgFond2" src="http://startinbio.com/Lib/Images/Fond/1.jpg" />
</div>

Ответ 6

Я пытался добиться того же самого, и после попытки динамически изменить ключевые кадры и все остальное, я нашел странное решение с помощью базовых CSS, см. Fiddle здесь. Это не очень элегантно, но делает именно то, что я (и вы, я надеюсь) хочу.

#menu, #yellow{
  position: fixed;
  top: 2.5vw;
  right: 2.5%;
  height: 25px;
  width: 25px;
  border-radius: 30px;
}

#menu{
  animation: blink 2s infinite;
	transition: 1s;
}

@keyframes blink{
  0% { background-color: grey; }
  50% { background-color: black; }
  100% { background-color: grey; }
}

#yellow{
	background-color: rgba(255, 0, 0, 0);
	transition: 1s;
}

#disque:hover #yellow{
	pointer-events: none;
	background-color: rgba(255, 0, 0, 1);
}

#disque:hover #menu{
	opacity: 0;
}

<div id="disque">
  <div id="menu"></div>
  <div id="yellow"></div>
</div>