I wrote these lines of code for my paragraph title to have an animated background image. The background zoom in and out fine on desktop/ laptop but it appears very shaky on mobile, including both Safari and Chrome (it still zooms in and out). Any ideas on how to make the transition smooth on mobile?
#2nd_paragraph_title {
color: transparent;
margin: 3%;
font-size: 15vw;
background: url(images/title_background.JPG) center center;
background-size: 40%;
-webkit-background-clip: text;
background-clip: text;
animation: zoom 7s infinite ease-in-out alternate;
-webkit-animation: zoom 7s infinite ease-in-out alternate;
-moz-animation: zoom 7s infinite ease-in-out alternate;
}
#keyframes zoom {
100% {
background-size: 15%;
}
}
I tried adding -webkit-, -moz- there but the problem still persists.
I also tried:
#keyframes zoom {
0% {
background-size: 40%;
}
100% {
background-size: 15%;
}
}
it's still shaky on mobile.
I really would appreciate any help! Thanks in advance!
Related
I made the following Animation to play while the page is loading.
HTML
<div class="skeleton"></div>
CSS
#keyframes shimmerBackground {
0% { background-position: -468px 0 }
100% { background-position: 468px 0 }
}
.skeleton:empty{
width: 500px;
height: 40px;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: no-repeat #e4e3e3;
background-image: linear-gradient(to right, #e4e3e3 0, #c7c6c6 20%, #e4e3e3 40%, #e4e3e3 100%);
animation: shimmerBackground 1s linear infinite;
}
Here it is in action: https://jsfiddle.net/NuccioJohn/fx1wr8e6/
The animation correctly stops itself after the element is loaded with the data. But the hit to the CPU from Painting and Rendering is absolutely absurd.
I have been able to use other methods to lower the CPU usage significantly, but these methods do not work in IE 11 and having it work in IE is a must.
My instinct is that I should be able to use the GPU to do this animation, and that will lessen the burden this animation has on the GPU.
transform: translateZ(0);
Does anyone know how to rewrite this in a more efficient manner?
Maybe something like this will work? Instead of directly animating the background image, which requires a repaint for each frame, try using transform: translate3d() on a pseudo element. The included z-axis in translate3d() will force GPU rendering too!
#keyframes shimmerBackground {
0% { transform: translate3d(-400px, 0, 0) }
100% { transform: translate3d(900px, 0, 0) }
}
.skeleton:empty{
width: 500px;
height: 40px;
position: relative;
overflow: hidden;
background-color: #e4e3e3;
}
.skeleton:empty::before {
content: "";
display: block;
width: 400px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: no-repeat #e4e3e3;
background-image: linear-gradient(to right, #e4e3e3 0, #c7c6c6 20%, #e4e3e3 40%, #e4e3e3 100%);
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation: shimmerBackground 1s linear infinite;
}
This question already has answers here:
background-position-y doesn't work in Firefox (via CSS)?
(9 answers)
Closed 3 years ago.
I know this has been answered somewhere already, but can't figure out what's wrong.
I have used repeating-linear-gradient for background and #-webkit-keyframes and #keyframes for animating it. It does work in google chrome but not in firefox.
HTML
<div class="menu_block"></div>
CSS
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position-x:0%;
-webkit-animation:'slide' 30s infinite linear forwards;
}
#-webkit-keyframes 'slide' {
0%{background-position-x:0%;}
100% { background-position-x:100%;}
}
#keyframes 'slide' {
0%{ background-position-x:0%; }
100% { background-position-x:100%;}
}
jsfiddle is here
https://jsfiddle.net/mathews8881/0cj3L6wu/
Could somebody please help.
Try animating both params background-position: 0% 0;. Also missing non-prefixed animation rule.
.menu_block {
height: 100px;
width: 500px;
background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);
background-size: 56px 56px;
background-position: 0 0;
-webkit-animation: slide 30s infinite linear forwards;
animation: slide 30s infinite linear forwards;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
#-webkit-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
<div class="menu_block">
</div>
Remove the single quotes on the animation/keyframes property values, the -webkit- prefix on animation and use background-position: 0%; instead of background-position-x:0%; (as mentioned in a comment, background-position-x is not supported across browser).
Note, since your prefixed properties weren't consistent applied I removed all of them, so you need to add them back to cover older browser versions needing them. Also, in your case, no need to use forwards in your animation when using infinite
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position:0%;
animation: slide 30s infinite linear;
}
#keyframes slide {
0%{ background-position:0%; }
100% { background-position:100%;}
}
<div class="menu_block">
</div>
The following image is to be used in a keyframes animation by moving the background-image position 100% to the right on each frame:
The idea is that the ArrowsAnim.png has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation arrowAnimation (CSS below) simply skips through background-position 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.
What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:
So for some reason, background-position is not being calculated correctly.
I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.
CSS:
#autoplay-arrow {
display: inline-block;
position: absolute;
width: 5.91549%;
top: 22.05882%;
height: 50.74627%;
margin-left: 18.30986%;
background-size: 100% 100%;
background-position: 0 0;
background-image: url(../graphics/Arrows_002.png);
}
#-moz-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#-webkit-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#autoplay-arrow.anim {
background-image: url(../graphics/ArrowsAnim.png);
background-size: 700% 100%;
-moz-animation: arrowAnimation 0.5s steps(3) infinite;
-webkit-animation: arrowAnimation 0.5s steps(3) infinite;
animation: arrowAnimation 0.5s steps(3) infinite;
}
I've been racking my brain on whether it's possible to have a div show a never-ending "conveyor belt" pattern that always goes in one direction.
You can take a div, tile a background image in one direction with repeat-x, then create a keyframe that moves the background-position by the width of one tile, which will bring the background to the same position where it was at the beginning of the transition.
What I can't figure out is how to "reset" the background-position, so that the cycle can run once again and create the illusion of continuous single-direction motion. Can this be done in CSS?
I could animate a gif and fake it that way, but they are rather large/slow to load & there is always a stutter during the loop.
Thanks!
Found something relevant on a website, after a brief search.
Sprites file:
Fiddle:
http://jsfiddle.net/CGmCe/8676/
Browser support: http://caniuse.com/#feat=css-animation
HTML:
<div class="hi"></div>
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
I have this: http://d.pr/i/A2b3 which acts as the divider between the header and the main content.
The image is set as the background image, repeat-x, of the header container.
<header> <--- image is background of this
<div id="container"></div>
</header>
I want the image to slide across the screen slowly almost in a wave like effect. Is this possible with CCS3 animations? If so can someone help?
Thanks
I would suggest using jQuery and a simple image slider with a shortened image pause so the image keeps on switching. As far as i know its not possible to get a video to appear in a slider (not without a play button of some sort). http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ would be an example of what i would use.
Try this!
CSS:
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
I created a Fiddle for you to play with here:
http://jsfiddle.net/e3WLD/3/