I am trying to use a sprite sheet to generate animation effect. My example is below. The image is scrolling vertically. I would like the image to remain in one place and give me the animation effects instead of scrolling vertically down. What is missing in my CSS?
#total-duration: 4s;
#steps-per-row: 15;
#duration-per-item: #total-duration / #steps-per-row;
body {background: #000;}
#interactive-animation {
margin: 0 auto;
width: 128px;
height: 128px;
background: url('https://amazed.png') center center;
-webkit-animation:
play-vertical #total-duration steps(#steps-per-row) infinite,
play-horizontal #duration-per-item steps(#steps-per-row) infinite;
animation:
play-vertical #total-duration steps(#steps-per-row) infinite,
play-horizontal #duration-per-item steps(#steps-per-row) infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
#interactive-animation:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#-webkit-keyframes play-vertical {
0% { background-position-y: 0; }
100% { background-position-y: 100%; }
//100% { background-position-y: -29px; }
}
#-webkit-keyframes play-horizontal {
0% { background-position-x: 0; }
100% { background-position-x: 100%; }
//100% { background-position-x: -1814px; }
}
Try below codes, to perform sprite animation we need to include CSS steps() animation functions, steps() is used to break a continuous animation or transition into steps.
body{
background:black;
}
#interactive-animation {
margin: 120px auto;
width: 120px;
height: 120px;
background: url('https://samsungvr.com/ui/CMS/wow.png');
-webkit-animation: mv 2s steps(2) infinite;
overflow:hidden;
}
#-webkit-keyframes mv{
0% { background-position-y: 0; }
100% { background-position-y: 100%; }
}
<div id="interactive-animation"></div>
Related
I have a background (cloud) and I want to animate it horizontally. If I start the animation from the left most position then the animtion is smooth but if I start the animation from the center the it becomes abrupt.
I know why is it behaving so but not getting a clue on how to make it smooth.
See the abrupt on when starting from the middle:
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 30vw 0;
}
to {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
Ideally, it should start from the center, then should go to the rightmost point and then should come out from the leftmost point and continue to reach to the center.
Solution 1: Not amazing
By your definition of "smooth" (i.e., going out the right and coming out the left), you can add additional breakpoints. Just make sure to set the percentage timings correct so that it is travelling the same speed before and after reaching the right edge.
If you make the jump between right edge and left edge fast enough, it should show smoothly.
body, html {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
#keyframes animatedBackground {
0% {
background-position: 30vw 0;
}
63.6% {
background-position: 100vw 0;
}
63.6000001% {
background-position: -10vw 0;
}
100% {
background-position: 30vw 0;
}
}
<div class="trt-clouds-1"></div>
(The animation travels 110vw total: 70 to the right, and 40 on the way back. To make it smooth, the animation spends 7/11 (63.6%) of the way going there, and the rest coming back, hence the timings.)
Solution 2: Pretty elegant
A second, more elegant option would be to use the animation-delay property with a negative start value. (This doesn't start at exactly 30vw, but you get the point).
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: -2s;
}
#keyframes animatedBackground {
0% {
background-position: -10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: 0;
}
#keyframes animatedBackground {
0% {
background-position:-10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
the only thing you have to is add a background position to your css
Another trick is to rely on some percentage and optimize the animation like below.
.trt-clouds-1 {
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 10vw) 10vw;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
It will also work even with a non-full width div since we are no more relying on vw unit inside the animation:
.trt-clouds-1 {
height: 200px;
width:200px;
border:1px solid;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 50px) 50px;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
Related question to get more details about the calculation: Using percentage values with background-position on a linear gradient
You can also consider pseudo element and translation to have better performance:
.trt-clouds-1 {
height: 200px;
position:relative;
overflow:hidden;
}
.trt-clouds-1:before {
content:"";
position:absolute;
top:0;
left:0;
width:calc(200% + 10vw);
height:10vw;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: auto 100%;
background-position:center;
animation: animatedBackground 4s -2s linear infinite;
}
#keyframes animatedBackground {
from {
transform:translate(-50%);
}
}
<div class="trt-clouds-1"></div>
I want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.
I've got this sample sprite grid sheet that I need to run through and animate. I am able to reach a certain point but struggling to make it perfect. The animation is not that smooth and additionally, the image is not aligned properly. During the animation, you can see image elements not centered with other elements in the view. Here is my HTML and CSS3 code so far.
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
-webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
<div class="hi">
</div>
Fiddle: http://jsfiddle.net/bf5ckdv9/
I have added a background dimension style, and rearranged some of your properties
the result is almost ok; but your sprite grid seems to be out of order
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite;
border: solid 1px blue;
background-size: 500% 500%;
background-repeat: no-repeat;
}
#keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 125%; }
}
#keyframes playh {
0% { background-position-x: 0%; }
100% { background-position-x: 125%; }
}
<div class="hi">
</div>
I'm trying to make a banner that scrolls sideways infinitely with css3 animation. The problem is that after the animation is over it has a harsh cut when it's restarting. I'm trying to figure out how to prevent that harsh animation.
I've put my code here.
#keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#-webkit-keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#masthead {
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg');
animation: slideleft 5s infinite ease-in-out;
-webkit-animation: slideleft 5s infinite ease-in-out;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
JavaScript would probably be a better way to handle this. Though in CSS, you could repeat the background image and extend the background-position and animation duration to a very high number. Here is a fiddle.
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-repeat: repeat-x;
...
animation: slideleft 600s infinite linear;
}
If you are using jQuery it would be fairly straightforward:
(function animateBG() {
$('#masthead').animate({
backgroundPosition: '+=5'
}, 12, animateBG);
})();
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-image: url('https://i.stack.imgur.com/TE4UI.jpg');
background-repeat: repeat-x;
animation: slideleft 600s infinite linear;
-webkit-animation: slideleft 600s infinite linear;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
Hi I've been trying to do a simple animation with css and a sprite, and it doesn't seem to work. Am I missing something? I've made a JS Fiddle sample.
Can some one explain me why this doesnt work?
http://jsfiddle.net/CmF6A/
<body>
<div id="wrapper">
<div id="bike">
</div>
</div>
</body>
div#wrapper {
width: 64px;
height: 80px;
background-color: #c0b898;
margin: auto;
}
#-webkit-keyframes running {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: running 1s steps(6, end) infinite;
}
There seems to be a problem with your animation name if you renamed it to something else it works.
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: anim 1s steps(6, end) infinite;
}
#-webkit-keyframes anim {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
An example: http://jsfiddle.net/CmF6A/2/
Here is a JSfiddle :)
I have simply updated your own fiddle.
http://jsfiddle.net/CmF6A/5/
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
from {background-position:0px;}
to {background-position:-320px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-position:0px;}
to {background-position:-320px;}
}
Check out this tutorial to create Sprite sheet animation
https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}