I am displaying three background images inside #keyframes with the goal of having each background image display for ten seconds, and then automatically change to the next image.
Right now I am able to get all of the three background images to display on the web page and automatically change, but what I notice is the first image changes immediately while the others stay on the screen for much longer.
How can I change the following code below the make each of the three background images display on the web page for ten seconds? Thank you.
<style>
body, html {
height: 100%;
margin: 0;
}
.change-background {
height: 115%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: change;
animation-direction: normal;
animation-iteration-count: infinite;
animation-duration: 30s;
/*animation: change 30s infinite normal;*/
}
#keyframes change {
0% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/avtovo-station.jpg");
}
50% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/kirovsky-zavod.jpg");
}
100% {
background-image: url("{{ STATIC_PREFIX }}images/SaintPetersburgMetro/zvenigorodskaya.jpg");
}
}
</style>
</head>
<body>
<div class="change-background"></div>
</body>
</html>
Related
I want to know if there's a way to make a GIF have this exact behavior:
Start paused in the page;
Play only while hovering;
Pause at the exact frame it was when dragging the mouse out of the image.
Is it possible to do this? Preferably without JavaScript, but I can use it if necessary.
There is. Basically you will need to create the gif yourself using individual frames. Essentially, you create X number of frames, then use keyframes to cycle through them as background-image properties of an absolutely positioned div. The "gif" starts with the property animation-play-state:paused and changes to running on hover. It is possible to switch these properties obviously. Consider the following:
Your markup:
<div class="gif"></div>
And your CSS:
.gif {
position: absolute;
margin: auto;
background-image: url(/path/to/starting.frame);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
animation: play 0.5s infinite steps(1);
animation-play-state: paused;
}
.gif:hover {
animation-play-state:running;
}
#keyframes play {
0% { background-image: url('/path/to/0.frame'); }
15% { background-image: url('/path/to/1.frame'); }
30% { background-image: url('/path/to/2.frame'); }
45% { background-image: url('/path/to/3.frame'); }
60% { background-image: url('/path/to/4.frame'); }
75% { background-image: url('/path/to/5.frame'); }
90% { background-image: url('/path/to/6.frame'); }
100% { background-image: url('/path/to/7.frame'); }
}
Here is an example I was able to find and alter.
I am developing an Ionic application where one of the templates contains sprite animation. The animation works fine except that the size is fixed for any device I use. Here's the code I use:
CSS
#animation_boy {
width: 558px;
height: 1536px;
background-image: url("../img/boy_sprite.png");
-webkit-animation: play 1.2s steps(7) infinite;
animation: play 1.1s steps(7) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px
}
to {
background-position: -3906px
}
}
#keyframes play {
from {
background-position: 0px
}
to {
background-position: -3906px
}
}
HTML
<div id="animation_boy"></div>
I want to make the size depend on the screen. Thanks for the help.
I'm a bit of a newbie to CSS3 animations, but I've looked everywhere, and I can't find a solution to this problem. I have a JSP page that I want the background to slowly fade from green to blue, and then slowly fade the opposite way and repeat this process infinitely.
I currently have it go from green to blue smoothly, but then it jerks back to blue instantly. Is there a way to play two animations from green to blue, then blue to green and repeat infinitely?
Here's the CSS code I have now:
#keyframes changeColorGreenToBlue {
from { background-color: rgb(146,213,142);}
to {background-color: rgb(133,184,222);}
}
#keyframes changeColorBlueToGreen {
from {background-color: rgb(133,184,222);}
to { background-color: rgb(146,213,142);}
}
.jumbotron {
height: 100%;
width: 100%;
background-color: green;
animation: changeColorGreenToBlue ease;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: changeColorBlueToGreen;
animation-iteration-count: infinite;
animation-duration: 4s;
background-size: cover;
background-repeat: repeat-y;
margin-bottom:1px;
}
It's a little messy because I was just trying everything to get it working. Sorry about that!
Rather than two keyframe animations, you want one that changes the background color twice (once at 50%, and back at 100%), like this:
#keyframes changeColor {
0% {
background-color: rgb(146,213,142);
}
50% {
background-color: rgb(133,184,222);
}
100% {
background-color: rgb(146,213,142);
}
}
See my codepen for example in action.
After executing this, background changes too fast and also it is a bit shaking. Help me to slow down this background change and stop background to shake.
HTML
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>Enhancing Your <br />Ways</h2>
<p>A free platform for schedualing</p>
</div>
</section>
CSS (Animation Delays not working)
<!--The animation-delays not working-->
#keyframes changebackground {
0% {
background-image: url("../Images/4.jpg");
animation-delay:5s;
}
25% {
background-image: url("../Images/1.jpg") ;
animation-delay:5s;
}
50% {
background-image: url("../Images/2.jpg") ;
animation-delay:5s;
}
100% {
background-image: url("../Images/3.jpg");
animation-delay:5s;
}
}
#banner {
margin-top:2.9em;
background-image: url("../Images/4.jpg");
background-position:center;
background-repeat:no-repeat;
padding:22em 0em 8em 0em;
background-size:cover;
width:100%;
float:left;
animation-name:changebackground;
animation-iteration-count:infinite;
animation-duration:2s;
animation-delay:5s;
}
If you need to slow down the animation then the property that needs to be modified is the animation's duration and not the animation delay. Set the animation-duration to a higher value. In the snippet, I have set it as 20s and so the change from each image to the next will take around 5s. If you need a time of 25s between each switch, then set the duration as 100s. animation-delay just adds a time delay before the start of the animation's first iteration but it doesn't really slow it down.
I don't really see a shake and so would need to see a demo of your code in-order to provide solutions. You may want to have a look at preloading all background images to stop it from causing problems.
#keyframes changebackground {
0% {
background-image: url("http://lorempixel.com/200/200/nature/4");
}
25% {
background-image: url("http://lorempixel.com/200/200/nature/1");
}
50% {
background-image: url("http://lorempixel.com/200/200/nature/2");
}
75% {
background-image: url("http://lorempixel.com/200/200/nature/3");
}
}
#banner {
margin-top: 2.9em;
background-image: url("http://lorempixel.com/200/200/nature/4");
background-position: center;
background-repeat: no-repeat;
padding: 22em 0em 8em 0em;
background-size: cover;
width: 100%;
float: left;
animation-name: changebackground;
animation-iteration-count: infinite;
animation-duration: 20s; /* set this */
animation-delay: 5s;
}
<section id="banner">
<div class="inner">
<h2>Enhancing Your <br />Ways</h2>
<p>A free platform for schedualing</p>
</div>
</section>
As you can see from the picture, it includes 6 parts.
I build a div 40px by 40px containing this picture.
overflow:hidden;
I want to animate this picture like it's blinking. which looks like: at the 1st second showing 1st part, the second showing the second part.
[Requirement: please don't make the animation like It's slide from bottom to top. ]
Here's how I did, not working.
1.using keyframe, like 20%, 40%, 60%, 80%, 100%. add top:-40, -80,...; but it looks like I'm slide the picture.
hope someone can help me out. Thanks a lot.
You can use the steps() function applied to a simple CSS3 background animation like so
http://codepen.io/anon/pen/JoEoPL
HTML
<div>Acquiring signal...</div>
CSS
div {
background-repeat: no-repeat;
background-image: url(http://i.stack.imgur.com/CAIVQ.png);
width: 80px;
height: 80px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-animation: blinksignal 6s steps(6, end) infinite;
animation: blinksignal 6s steps(6, end) infinite;
}
#-webkit-keyframes blinksignal {
0% { background-position: 0 0 }
100% { background-position: 0 -480px }
}
#keyframes blinksignal {
0 { background-position: 0 0 }
100% { background-position: 0 -480px }
}
From MDN
The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.
Do You mean about sth like here: http://jsfiddle.net/5jpasp1v/
I've simply add 3 `div' elements with state for each state, and change it with css
HTML:
<div id="wifi">
<div class="state state-1"></div>
<div class="state state-2"></div>
<div class="state state-3"></div>
</div>
CSS:
#keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.state-1 {...}
.state-2 {...}
.state-3 {...}