Форум

Tord002 · #1 (**permalink**) 25.02.2016, 13:12

Здравствуйте!
Помогите, пожалуйста, зациклить скрипт чтобы анимация выполнялась в одну сторону, а потом в другую.
Подскажите может быть есть способ вообще гораздо проще делать такой эффект?
Спасибо заранее!

Tord002 · #2 (**permalink**) 25.02.2016, 13:17

Может кто-то подскажет способ как плавно накладывать и снимать css класс с блока

рони · #3 (**permalink**) 25.02.2016, 13:46

Tord002,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .time{
    background-color: rgb(255, 30, 255);
    color: rgb(102, 255, 255);
    padding: 4px 8px;
    font-size: 24px;
    border-radius: 4px;
  }

  </style>
</head>

<body>

  <div id=div class="time">Блок</div>
  <script>



function anime(b) {
    return {
            play: function() {
            var d = performance.now();
            requestAnimationFrame(function e(a) {
                a = (a - d) / b.duration;
                1 < a && (a = 1);
                var r = b.from + (b.to - b.from) * a | 0;
                b.elem.style.backgroundColor = 'rgb(' + r  + ',' + 30 + ',' + r +')';
                1 == a && (d = performance.now(),b.from += b.to, b.to = b.from - b.to, b.from -= b.to);
                requestAnimationFrame(e)
            })
        }
    }
};
var anim = anime({
        from : 255,
        to : 0,
        duration: 5 * 1000,
        elem : document.querySelector('.time')
    });
anim.play()

</script>
</body>
</html>

рони · #4 (**permalink**) 25.02.2016, 13:50

Tord002,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

destus · #5 (**permalink**) 25.02.2016, 13:54

рони,
animation-direction ещё надо, чтобы туда сюда.

рони · #6 (**permalink**) 25.02.2016, 14:01

destus,
нафига если можно указать только 0% 50% 100%

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FFFFFF;
  }
     50%{
         background-color:  #000000;
      }

   100%{
     background-color: #FFFFFF;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FFFFFF;
  }
     50%{
         background-color:  #000000;
      }

   100%{
     background-color: #FFFFFF;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

destus · #7 (**permalink**) 25.02.2016, 14:05

рони,
ну или так. в предыдущем посте небыло такого.

рони · #8 (**permalink**) 25.02.2016, 14:10

destus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;

	-webkit-animation: color 5s ease-in-out infinite alternate;
	-moz-animation: color 5s ease-in-out infinite alternate;
	-o-animation: color 5s ease-in-out infinite alternate;
	animation: color 5s ease-in-out infinite alternate;
  }

  @keyframes color {
0%{
         background-color:  #000000;
      }

   100%{
     background-color: #FFFFFF;
   }

}
@-webkit-keyframes color {
0%{
         background-color:  #000000;
      }

   100%{
     background-color: #FFFFFF;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

Tord002 · #9 (**permalink**) 25.02.2016, 14:23

Вот это да! Столько вариантов сразу! Последний очень круто!
Спасибо огромное!

Очень пригодилось! Проблема решена!

Форум

Справочник

Discord чат

Курсы javascript