Помогите зациклить скрипт
Здравствуйте!
Помогите, пожалуйста, зациклить скрипт чтобы анимация выполнялась в одну сторону, а потом в другую. Подскажите может быть есть способ вообще гораздо проще делать такой эффект? Спасибо заранее! |
Может кто-то подскажет способ как плавно накладывать и снимать css класс с блока
|
анимация backgroundColor на js
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>
|
анимация background-color на css
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>
|
рони,
animation-direction ещё надо, чтобы туда сюда. |
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,
<!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>
|
Вот это да! Столько вариантов сразу! Последний очень круто!
Спасибо огромное! :thanks: Очень пригодилось! Проблема решена!:dance: |
| Часовой пояс GMT +3, время: 14:53. |