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.
Related
I want my image to start with top:0 and ends with bottom:0 with smooth animation. I am struggling to find out the solution.
To be very clear i cannot use background images for SEO purpose. JS solutions are also welcome.
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 5s linear infinite alternate;
position: absolute;
top: 0;
left: 0;
}
#keyframes nudge {
0%, 100% {
top: 0;
bottom: auto;
}
50% {
bottom: 0%;
top: auto;
}
}
<div class="element">
<img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
Instead of trying to animate on top and bottom, you can animate on translateY and move it down with top so it doesnt go off screen
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 2s linear infinite alternate;
position: absolute;
top: 0;
transform: translateY(0);
}
#keyframes nudge {
100% {
transform: translateY(-100%);
top: 100%;
}
}
<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
I am experimenting with some keyframe animations in css which seem to work fine in IE, Chrome, Firefox but not in Microsoft Edge for some reason. I get this flicker at the end of the animation where I guess it shows their final position and sets the opacity to 1 before hiding them once again and restarting the animation. My code is as follows (This is minified for one bubble, but the link below is a codepen for the whole animation):
HTML:
<div class="canvas">
<div class="bubble"></div>
</div>
CSS:
.canvas {
min-height: 100%;
width: 100%;
background: green;
position: absolute;
overflow: hidden;
}
.bubble {
display: block;
border-radius: 100%;
opacity: 0.8;
position: absolute;
}
.bubble:nth-child(1) {
background: radial-gradient(ellipse at center, #E6EBF2 0%, #E6EBF2 46%, #EFF0EC 100%);
width: 7px;
height: 7px;
left: 13vw;
bottom: 52vh;
-webkit-animation: move1 infinite 10s;
animation: move1 infinite 10s;
}
#-webkit-keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
#keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
Here is a codepen i created:
https://codepen.io/anon/pen/BqqMKe
Any help would be appreciated as I can't seem to figure it out.
I have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images.
I was trying to give animation to the first image in the following way:
in 0% it starts at the beginning of the div (the fish's head is on the right)
in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion)
But it just rotates in 100% and no more. I don't know if this happens because I don't understand some concept of the animation property.
This is all my code:
#keyframes fish01 {
0% {
left: 0%;
transform: rotateY(180deg);
}
1% {
transform: rotateY(0deg);
}
99% {
transform: rotateY(0deg);
}
100% {
left: 90%;
transform: rotateY(180deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
<img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
</div>
</section>
I've tried everything in the #keyframes and looked into W3Schools website about animation property, but it didn't help me. Any suggestions?
Reason:
The behavior that is seen is expected one based on your #keyframes and the animation-direction setting. When the animation's direction is set to alternate, the UA executes the animation from 0 to 100 for the odd numbered iterations, 100 to 0 for the even numbered iterations.
As per your keyframes, the transform goes from rotateY(180deg) to rotateY(0deg) at 1% of the animation's duration itself and so during the odd numbered iterations you don't see any visible rotation (as duration is pretty small) and it goes from rotateY(180deg) (at 100%) to rotateY(0deg) (at 99%) because of which you don't get to see any visible rotation during even numbered iterations also.
The problem in writing keyframes for forward direction and re-using the same for the reverse (using animation-direction) is that it can be done only when the states are the same for both. In this case, it is not because the element should be in unrotated state during forward movement and should have rotateY(180deg) during the reverse movement.
Solution:
For the element to be seen in its rotated state, the transform must be retained for some time. So, for your case it is better to do away with the animation-direction: alternate setting and write both the forward and reverse motions within the keyframes itself like in the below snippet.
(Note: Since we are writing both forward and reverse motions within the keyframes, you may have to double the animation-duration).
#keyframes fish01 {
0% {
left: 0%;
transform: rotateY(0deg);
}
49.5% {
left: 90%;
transform: rotateY(0deg);
}
50.5% {
left: 90%;
transform: rotateY(180deg);
}
100% {
left: 0%;
transform: rotateY(180deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 10s; /* double of original time */
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
<img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
</div>
</section>
The problem was that you had animation-direction: alternate; in your CSS. To compensate for removing this, you also need to make the img moving to left: 90% being at the 50% mark in the animation, not the 100% mark.
Hope this helps! :)
#keyframes fish01{
0% {
left: 0%;
transform: rotateY(0deg);
}
49% {
transform: rotateY(0deg);
}
50% {
left: 90%;
transform: rotateY(180deg);
}
99% {
transform: rotateY(180deg);
}
100% {
left: 0%;
transform: rotateY(0deg);
}
}
body {
background-color: black;
}
div {
position: absolute;
margin-left: 18%;
margin-top: 3%;
width: 800px;
height: 500px;
border: 5px double #DDDDDD;
border-radius: 1em 1em;
background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
float: left;
position: absolute;
margin: 0px;
top: 20%;
width: 100px;
height: 50px;
transform: scale(1.5, 1.5);
animation-name: fish01;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
div img:nth-child(2) {
float: left;
position: absolute;
top: 20%;
left: 60%;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>CSS rotate animation</title>
<link rel="stylesheet" href="Transicion02.css"/>
</head>
<body>
<section>
<div>
<img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png"/>
<img src="http://www.pets4homes.co.uk/images/fish_hero.png"/>
</div>
</section>
</body>
</html>
I am trying to build a simple CSS3 animation, a pulsing square inside a bigger square (centered).
It seems to work fine except on IE, at the end of the animation the inner square move to up-left of his parent.
I didn't find a solution, help me please. What am I doing wrong?
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% { transform: translate(-50%, -50%) scale(.2,.2); }
50% { transform: translate(-50%, -50%) scale(.8,.8); }
100% { transform: translate(-50%, -50%) scale(.2,.2); }
}
Here a JsFiddle of the code
How strange. It looks like IE and Edge are having some issue resetting the transforms on subsequent loops.
Although I couldn't find a direct solution to the browser's rendering problem (likely a bug), your sample looks like a great place to use the absolute centering trick. By not having the extra translate to center it, it works in IE, and is a bit simpler.
Working Example (jsFiddle):
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% {transform: scale(.2,.2); }
50% {transform: scale(.8,.8); }
100% {transform: scale(.2,.2); }
}
<i id="foo"/>