CSS3 <body> изменение цвета фона линейная бесконечная анимация

Мне нужно изменить цвет фона моей страницы в цикле. Так что у меня есть что-то вроде этого:CSS3 <body> изменение цвета фона линейная бесконечная анимация

.bg-changer { 
    animation: bg-img-slider 10s linear infinite; 
    transition: background 300ms ease-in 200ms;

body { 
 
    margin: 15px auto; 
 
    height: 95vh; 
 
    width: 90%; 
 
    border: 1px solid silver; 
 
} 
 
.bg-changer { 
 
    animation: bg-img-slider 10s linear infinite; 
 
    /*transition: background 300ms ease-in 200ms;*/ 
 
    transition-timing-function: ease-in-out; 
 
    transition-duration: 1s; 
 
} 
 
@keyframes bg-img-slider { 
 
    0%, 100% { 
 
    background-image: radial-gradient(silver, snow); 
 
    } 
 
    20% { 
 
    background-image: radial-gradient(#2b5876, #4e4376); 
 
    } 
 
    40% { 
 
    background-image: radial-gradient(#44A08D, #093637); 
 
    } 
 
    60% { 
 
    background-image: radial-gradient(#DD5E89, #F7BB97); 
 
    } 
 
    80% { 
 
    background-image: radial-gradient(#348F50, #56B4D3); 
 
    } 
 
    90% { 
 
    background-image: radial-gradient(#bdc3c7, #2c3e50); 
 
    } 
 
} 
 
.page-header { 
 
    padding: 10px 0 5px 15px; 
 
} 
 
.page-header>h1 { 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid gray; 
 
} 
 
.page-header>p { 
 
    font-size: 85%; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>BG</title> 
 
</head> 
 

 
<body class="bg-changer"> 
 
    <div class="main-content "> 
 
    <div class="page-header"> 
 
     <h1>Page Title</h1> 
 
     <p>This is the tag line</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

} 

@keyframes bg-img-slider { 
    0%, 
    100% { 
     background-image: radial-gradient(silver, snow); 
    } 
    20% { 
     background-image: radial-gradient(#2b5876, #4e4376); 
     /*animation-timing-function: ease-in;*/ 
    } 
    40% { 
     background-image: radial-gradient(#44A08D, #093637); 
    } 
    60% { 
     background-image: radial-gradient(#DD5E89, #F7BB97); 
     /*animation-timing-function: ease-in;*/ 
    } 
    80% { 
     background-image: radial-gradient(#348F50, #56B4D3); 
    } 
    90% { 
     background-image: radial-gradient(#bdc3c7, #2c3e50); 
     /*animation-timing-function: ease-in;*/ 
    } 
}

Я применяю класс bg-changer к body тега. Он работает, но изменение цвета происходит как пощечина. Я попробовал несколько вещей, чтобы сделать его более плавным. Я попробовал transition, animation-timing-fuction и несколько других (также разместил их в ключевых кадрах). Ничто не работает!

Пожалуйста, просветить меня следующие вопросы у меня есть:

Во-первых, очевидно, как изменить цвет фона тела плавно, а не мгновенно (на каждого ключевого кадра%).
Почему background-color не работает? Мне пришлось использовать background-image. Каков правильный способ использования - background, background-color, background-image?

Заранее спасибо.

источник

2017-02-06 Vivek Ragunathan

Градиент не анимируется. (Единственное исключение - позиция).

Фоновый цвет является анимированным, но ограничен сплошным цветом.

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    animation: colors 10s infinite; 
 
} 
 

 
@keyframes colors { 
 
    from {background-color: blue;} 
 
    to {background-color: green;} 
 
}

<div></div>

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

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    animation: colors 2s infinite; 
 
    background-image: radial-gradient(circle, transparent, red); 
 
} 
 

 
@keyframes colors { 
 
    from {background-color: blue;} 
 
    to {background-color: green;} 
 
}

<div></div>

Но вы ограниченное оживлением внутренней части, внешней части

Более сложный пример будет использовать псевдо-элемент, и анимировать теневой

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    border: solid 1px red; 
 
    overflow: hidden; 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    width: 300px; 
 
    height: 300px; 
 
    top: -50px; 
 
    left: -50px; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    animation: colors 3s infinite; 
 
} 
 

 
@keyframes colors { 
 
    from {background-color: green; 
 
     box-shadow: inset 0px 0px 80px 80px yellow; 
 
    } 
 
    to {background-color: blue; 
 
     box-shadow: inset 0px 0px 80px 100px red; 
 
    } 
 

 
}

<div></div>

Ну, результат не очень хорошо выглядит, но вы получите идею.

источник

2017-02-06 21:47:44 vals

Спасибо @vals. Неплохо! Я остановился на этом: https://codepen.io/vivekragunathan/pen/XpBgxL Эквивалент градиента, как вы сказали, уточняет, а не мое удовлетворение. Кроме того, кажется, сложно получить градиент, привлекательный с помощью теневой коробки. –

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

Например: использовать анимацию в переходах, как animation_in, animation_out etc.Also, попробовать функцию перехода синхронизации, как

{ 
transition-timing-function: ease-in-out; 
}

более http://www.the-art-of-web.com/css/timing-function/.

источник

2017-02-06 18:40:59 Krishna

Я пробовал за ваше предложение, но, похоже, не работает. Не уверен, что мне не хватает. Приложите фрагмент кода в вопросе выше. Вы можете взглянуть? –

@VivekRagunathan Я новая пчела. Я думаю, что это должно исчезнуть и выпустить концепцию для плавных переходов. https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ В конце ссылки на страницу они также показали несколько анимаций. попробуйте их. – Krishna

CSS3 <body> изменение цвета фона линейная бесконечная анимация

ответ

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