My animation keeps disappearing after it completes its animation. I have followed the answers to other questions but it still doesn't help. My CSS is as follows:
.upvote-object {
width: 50px;
height: 62.5px;
background: url('/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
&.upvoted {
background: url('/icons/upvoted.png') left center no-repeat;
background-size: 50px 62.5px !important;
}
}
.ani-upvote {
background: url('/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 3s steps(34);
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
#keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
#-webkit-keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
I am calling it in my HTML like this:
<div class="upvote-object ani-upvote"></div>
Here's the problem: JSFiddle
UPDATE: Please also know that the animation must also stay on the last frame! (Green)
I got it working. But I’m not a CSS expert. So I’m sorry for not being able to explain why it works. Maybe you know why :)
.upvote-object {
width: 50px;
height: 62.5px;
background: url('http://sstaging-parts.herokuapp.com/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
.ani-upvote {
background: url('http://staging-parts.herokuapp.com/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 2s steps(33); // changed the steps to 33
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
#keyframes play {
100% { background-position: -1650px; opacity: 1; }
}
#-webkit-keyframes play {
100% { background-position: -1650px; opacity: 1; } // Changed the position to -1650
}
UPDATE
I got it to work. I think it has to do with the sprite and the position where it stops the animation... if that makes any sense.
Related
I want to blink my bg image using css.
It should blink quickly and I have no idea how to do it.
I can only use HTML and CSS.
header {
width: 100%;
height: 100vh;
background-image : url('bg.jpg');
animation: blinkingBackground 2s infinite;
background-position: right bottom, left top;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Dosis', sans-serif;
}
I have also added
animation: blinkingBackground 2s infinite;
but it's not working.
#Ahmad's solution is good, but it doesn't fade in smoothly. So I made a code which makes the blinking smoother.
.html_bg {
background-image: url(https://cdn.arstechnica.net/wp-content/uploads/2020/09/macOSBigSur.jpg);
animation: blink 1.5s infinite;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_bg">
<!--Put your content here-->
</div>
I made the opacity change to zero at 50% so that the opacity can change back to 1 smoothly.
Do you need something like this?
.html_image {
background-image: url('https://i.picsum.photos/id/686/536/354.jpg?hmac=nQKjRmIoZtUkWvI-wNF8RFNW89VHuPIPT2muuPPL3QY');
height: 200px;
animation: blink 1s infinite;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_image">
</div>
Working Fiddle
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 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>