This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I can't run linear-gradient animation by #keyframes. I think it is due to background-position property in my code that is causing the problem. However, https://webdevtrick.com/css-gradient-background/'>here, background-position property doesn't cause the problem.
I have compared my code to the code at that site to see what essential property is missing in mine. Here is the CSS code:
body {
margin: 0;
}
.navbar {
background-image: linear-gradient(125deg, #337909, #082a87);
height: 10%;
width: 100%;
position: absolute;
-webkit-animation: animebg 5s infinite;
animation: animebg 5s infinite;
background-size: auto;
}
header {
color: aliceblue;
font-family: cursive;
text-align: center;
}
#-webkit-keyframes animebg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes animebg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='theme.css'>
<style>
</style>
</head>
<body>
<header class='navbar'>
<h1>Welcome!</h1>
</header>
<!--<button type="button" class="button1">Yes!</button>-->
</body>
</html>
I think you can't move position with percentage in animation (Use another unit) unless you set background-size to it. Look at the snippet below:
I hope it helps :)
body {
margin: 0;
}
.navbar {
background-image: linear-gradient(90deg, #337909, #082a87, #337909);
background-size: auto;
height: 10%;
width: 100%;
position: absolute;
-webkit-animation: animebg 2.5s linear infinite;
-moz-animation: animebg 2.5s linear infinite;
animation: animebg 2.5s linear infinite;
}
header {
color: aliceblue;
font-family: cursive;
text-align: center;
}
#keyframes animebg {
0% {
background-position: 100vw 50%;
}
100% {
background-position: 0 50%;
}
}
<header class='navbar'>
<h1>Welcome!</h1>
</header>
Related
I'm trying to make an animation loop with keyframes but there's an unwanted delay before the animation starts and also between the iterations. I can't set the animation end to 100 % because it doesn't start then. What am I doing wrong?
<html>
<head>
<style>
.first {
height: 100vh;
perspective: 900px; }
.second{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200%;
transform: rotateX(70deg) translateX(-10%) translateY(50%);
transform-style: preserve-3d;
margin: 0 auto;
z-index: 1;
background-image: repeating-linear-gradient(to bottom, #FE18D3 0%, #333 0.10% 1.90%, #FE18D3 2%);
background-size: 100vw 100vw;
animation-name: gradient;
animation-timing-function: linear;
animation-duration: 10s;
animation-iteration-count: infinite; }
#keyframes gradient {
0% { background-position: 0%; }
50% { background-position: 100%; }
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
</div>
</body>
</html>
UPDATE: The initial answer suffered from two problems - in particular there was 100% usage of the GPU (which meant that at times there wasn't enough processor power to do what was required).
This led to thinking of a different way of doing the animation. This snippet puts the background image onto a before pseudo element and translates that rather than requiring the system to recalculate from scratch the repeating background image. The GPU usage (on my Windows 10 laptop) is still high (around 60%) but at least there is enough processor power to keep things going.
The pseudo element is twice the height of its 'owner' and it animates just to 50% of its height and then starts again, that way things are smooth.
<html>
<head>
<style>
* {
margin: 0;
}
body {
overflow: hidden;
width: 100vw;
height: 100vh;
}
.first {
height: 100vh;
perspective: 900px;
overflow: hidden;
position: relative;
}
.second {
position: absolute;
top: 15%;
/* this amount depends on the angle of rotation so may need recalculating */
left: 0;
width: 200vw;
height: 100vh;
transform: rotateX(70deg) translateX(-30%);
transform-style: preserve-3d;
margin: 0 auto;
z-index: 1;
overflow: hidden;
}
.second::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background-image: linear-gradient(to bottom, #FE18D3 0% 5%, #333 5% 100%);
background-size: 100% 5%;
background-repeat: no-repeat repeat;
background-position: left top;
animation-name: gradient;
animation-timing-function: linear;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes gradient {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
</div>
</body>
</html>
ORIGINAL ANSWER:
This is a partial answer in the hope it will lead to a full one.
To remove the delay at the start you can set the animation-delay to -5s - ie. start off at the middle of the animation.
To remove the pauses during the infinite animation you can add another copy of the element and animate that during the pauses of the first.
<html>
<head>
<style>
.first {
height: 100vh;
perspective: 900px;
}
.second,
.third {
position: absolute;
top: 0;
left: 0;
rright: 0;
bottom: 0;
width: 200%;
transform: rotateX(70deg) translateX(-10%) translateY(50%);
transform-style: preserve-3d;
margin: 0 auto;
z-index: 1;
background-image: repeating-linear-gradient(to bottom, #FE18D3 0%, #333 0.10% 1.90%, #FE18D3 2%);
background-size: 100vw 100vw;
animation-name: gradient;
animation-timing-function: linear;
animation-duration: 10s;
animation-iteration-count: infinite;
opacity: 0;
}
.second {
animation-delay: -5s;
}
#keyframes gradient {
0% {
background-position: 0%;
opacity: 0;
}
50% {
background-position: 100%;
opacity: 0;
}
50.0000001% {
background-position: 100%;
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
There are a couple of problems with this though. The most obvious is that there is a slight jerk every 5 seconds as the timing/positioning is not exact (?)
The other problem is that a huge amount of processor time is taken up. On my fairly powerful laptop the GPU usage ranges between 99% and 100% - which probably means that it's not quite keeping up on occasion. [and maybe a contributing factor to the jerkiness??]. It's also a battery-flattener which users may not appreciate.
It may be worth exploring a different method of animation, for example translations so the system doesn't have to constantly calculate positioning of a repeating background image.
Is there an easy way, using only CSS, to enable background image slideshow?
I have the background image defined as fullscreen and responsive inside the html property in CSS and would like it to have a simple transition effect. The CSS looks like this:
html {
background: url(slike/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Do I need to define it in html and make a new CSS class? The only 'problem' is that the backgrounds need to be fullscreen and responsive.
You can do so by using the container div like this
html,body {
width:100%;
height:100%;
}
body {
margin: 0;
}
.container
{
width:100%;
height:100%;
}
#slideshow {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width:100%;
height:100%;
display: inline-block;
}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
position: absolute;
left: 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: inline-block;
text-align: center;
}
span{
border: 1px solid #000;
border-radius: 3px;
box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3);
font-size:4em;
background-color:#fff
}
.elemnt {
animation: xfade 16s 8s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
.elemnt1 {
animation: xfade 16s 6s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/sahara-desert-by-ellie-1024x683.jpg');
}
.elemnt2 {
animation: xfade 16s 2s infinite;
background-image: url('https://pbs.twimg.com/media/C4JYsjcWYAAixfx.jpg');
}
.elemnt3 {
animation: xfade 16s 0s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
#keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade1{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade2{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade3{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
<div class="container">
<div id="slideshow">
<div class="elemnt"><span>Text Slider 1</span></div>
<div class="elemnt1"><span>Text Slider 2</span></div>
<div class="elemnt2"><span>Text Slider 3</span></div>
<div class="elemnt3"><span>Text Slider 4</span></div>
</div>
</div>
Try this now the slider is using only css you can modify the timing, by changing the animation duration
What can I do to avoid the image blurry/flickering issue when using CSS transform? I've tried a bunch of suggestions from CSS transition effect makes image blurry / moves image 1px, in Chrome?, but cannot seem to figure it out.
I've attached the plunker code below.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css
/* Styles go here */
.sectors {
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
}
.sectors__section__title {
font-size: 32px;
line-height: 48px;
}
.sectors-icon .sectors-icon-container{
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
opacity: 1;
transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
}
#keyframes floating_fixed_income {
0% {
transform: translate(0%,0%);
}
12.5% {
transform: translate(-2%,1%);
}
25% {
transform: translate(-4%,2%);
}
50% {
transform: translate(-2%,3%);
}
62.5% {
transform: translate(0%,2%);
}
75% {
transform: translate(1%,1%);
}
100% {
transform: translate(2%,0%);
}
}
.sectors-icon-container.fixed_income {
animation-name: floating_fixed_income;
animation-duration: 5s;
height: 112px;
background-size: 112%;
width: 112px;
margin-left: 73%;
margin-top: -11%;
}
I think it's a bug. Not as neat but my recommendation is to just go with animating an absolutely positioned element for now. You can position your sectors-icon where you want it, give it relative positioning and then add the hovering animation to it's child img with absolute positioning:
#keyframes floating_fixed_income {
0% {
top: 0;
}
12.5% {
top: 20px;
}
25% {
top: 10px;
}
50% {
top: 100px;
}
62.5% {
top: 50px;
}
75% {
top: 20px;
}
100% {
top: 0;
}
}
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
background: #ececec url(images/x/x.jpg) top left repeat-x;
I want to slide it. It's loopy image. I want to slide it from left to right or right to left. It doesen't matter... How can I do this?
You could try using keyframes, here's a good example;
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If you want to add animation to background then you can use pseudo element and add animation to it
div {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
background: url(http://placehold.it/200x200) no-repeat;
-webkit-animation: slide 4s linear infinite;
-moz-animation: slide 4s linear infinite;
animation: slide 4s linear infinite;
}
#-webkit-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#-moz-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
<div class="slide">
<p>The background image is moving</p>
</div>
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}