Я не могу анимировать линейными градиентами

Я сделал анимации, который должен иметь наклоненной & Перейти в другое место на экране, но градиент не будет работать вообще.Я не могу анимировать линейными градиентами

Я использовал этот код:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    img { 
     width:100px; 
     height:100px; 
     background: linear gradient(red,yellow); 
     color: #ffffff; 
     position: relative; 
     font-weight:bold; 
     font-size:20px; 
     padding:10px; 
     border-radius:5px; 
     animation:animated_div 5s 5; 
     -webkit-animation:animated_div 5s 1; 
     -moz-animation:animated_div 5s 1; 
      -o-animation:animated_div 5s 5; 
       -webkit-border-radius:5px; 
    } 

    @keyframes animated_div { 
     0% {transform: rotate(0deg);left:0px;} 
     12.5% {transform: rotate(20deg);left:0px;} 
     25% {transform: rotate(0deg);left:500px;} 
     27.5% {transform: rotate(0deg);left:500px;} 
     35% {transform: rotate(0deg);left:500px;background:-webkit- linear- gradient(red,yellow;} 
     50% {transform: rotate(-360deg);left:0px;} 
     62.5% {transform: rotate(0deg);left:0px;} 
     77.5% {transform: rotate(20deg);left:0px;} 
     80% {transform: rotate(0deg);left:500px;} 
     90% {transform: rotate(0deg);left:500px;} 
     95% {transform: rotate(0deg);left:500px;background:-webkit-linear- gradient(Yellow,Red;} 
     100% {transform: rotate(-360deg);left:0px;} 
    } 
    body{background-color:black;} 
    </style> 
</head> 
<body> 
    <img class="q" src="https://pbs.twimg.com/media/C3dJvIZUEAAkIjg.png"> 
</body> 
</html>

Но это не изменит границы градиенты likeI хотел.

источник

2017-01-31 Anonymous

Во-первых, пожалуйста, исправить все ошибки, опечатки в коде. – Harry

Вам не нужен дефис в linear-gradient.

Эта строка должна гласить:
background: linear-gradient(red,yellow);

источник

2017-01-31 08:22:59

Я пробовал это раньше ... Это не работало, но теперь, вы видите, что теги были, поэтому я не заметил этого, спасибо! –

Я не могу анимировать линейными градиентами

ответ

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