I want the block to go from one point to another.
In the Fiddle you can see that after the animation, the block goes back to it's first position.
How can I prevent that?
http://jsfiddle.net/2nT2S/
the css
div
{
width:100px;
height:100px;
background:black;
position:relative;
animation:myfirst 2s;
-webkit-animation:myfirst 2s; /* Safari and Chrome */
}
#keyframes myfirst
{
from { left:0px; top:0px; }
to { left:0px; top:200px; }
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from { left:0px; top:0px; }
to { left:0px; top:200px; }
}
</style>
Simply add the forwards animation-fill-mode to the animation:
animation:myfirst 2s forwards;
-webkit-animation:myfirst 2s forwards; /* Safari and Chrome */
jsfiddle
I'm new to animations, but I think it can be achieved by adding top:200px; to the div
here's an example: http://jsfiddle.net/fatgamer85/2nT2S/2/
Related
I built a preloading screen for a website with a loading bar that is animated with CSS #keyframes. Works fine on Chrome and Firefox, but on macOS Safari it gets very discrete. Here is a video demo of how it looks on Safari: https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be
As you can see, loading bar background (gray line) and the bar itself (black line) twitch instead of going smoothly from 0% width to 100%. What could be a problem, is this known bug of Safari? Latest macOS and Safari.
#keyframes loading-wrapper-anim {
0% {
width:0%;
}
100% {
width:100%;
}
}
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:0%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
<div class="preloader">
<div class="loading_wrapper">
<div class="loading_bar">
</div>
</div>
</div>
Smooth animation is expected.
Thank you.
You can attempt to force the hardware acceleration by adding a translateZ on the animation.
.preloader .loading_wrapper {
position:absolute;
width:0%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start;
/* Add this */
-webkit-transform: translateZ(0);
}
JSFiddle
Alternatively, you can look into using the will-change method as a last resort for smoother animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
The way I fixed it is instead of trying to manipulate width of an element (which causes redrawing each time the width changes), did the following:
#keyframes loading-wrapper-anim {
0% {
transform:scaleX(0);
}
100% {
transform:scaleX(1);
}
}
.preloader .loading_wrapper {
position:absolute;
width:100%;
height:1px;
background:#dbdbdb;
top:12rem;
animation: loading-wrapper-anim 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
align-self:flex-start; /*this one is because of the parent element*/
transform:scaleX(0);
transform-origin:0% 0%;
}
.preloader .loading_wrapper .loading_bar {
height:100%;
width:100%;
height:100%;
background:#000;
animation: loading-wrapper-anim 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
transform:scaleX(0);
transform-origin:0% 0%;
}
I used transform:scaleX() in conjunction with transform-origin:0% 0% (this one sets center of transformation to the top left corner) to emulate width change without actually changing it.
Conclusion: use transform where/when possible. They are more efficient in terms of CSS animations and transitions.
I found this code at http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/ and liked the effect. Though when I put it into my email it creates a huge white space between the tables.
How do I insert this into an email correctly? Do I need to place the div tags in a certain place?
<style>
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.animcontainer{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background-color:#007FFF;
}
.snow{
border-radius:9px;
height:18px;
width:18px;
position:absolute;
top:-20px;
background-color:#ffffff;
}
.snow1{
-webkit-animation: snowanim1 5s linear 0s infinite;
}
.snow2{
-webkit-animation: snowanim2 6s linear 1s infinite;
}
.snow3{
-webkit-animation: snowanim3 7s linear 2s infinite;
}
#-webkit-keyframes snowanim1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
#-webkit-keyframes snowanim2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
#-webkit-keyframes snowanim3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
.
<div class="animcontainer">
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
I figured it out in the end, it makes no difference where the div tags are. What was causing the issues was the animcontainer.
There is one issue I could not solve however and that was the animation not reaching the bottom of the page despite being "top:100%" within the animation, so I had to do 2000% to actually reach the bottom which does not look like an elegant solution.
I am trying to animate two pictures so that they change at fixed intervals but the problem is that the second image appears quickly and fades I need a way to make the delay property to repeat i have refereed this but that doesn't seem to work CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/
I think my problem is somewhere here
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
First fix your HTML(markup), then you can animate the opacity and not the z-index
.container {
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img {
position:absolute;
width:100%;
}
#-webkit-keyframes anim1 {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes anim2 {
from {
opacity:1;
}
to {
opacity:0;
}
}
[href=first] img {
opacity:0;
/*animation----:----name--duration--delay--timing function---direction----iteration count*/
-webkit-animation: anim1 2s 0s linear alternate infinite;
}
[href=second] img {
opacity:1;
-webkit-animation: anim2 2s 0s linear alternate infinite;
}
<div class="container">
<a href="second">
<img src="http://placekitten.com/300/300" />
</a>
<a href="first">
<img class="front" src="http://placekitten.com/300/301" />
</a>
</div>
Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/
A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index
property, as well as the display property.
I have a div with an intro animation and on click I add a new class called 'exit' with a new animation, but the animation dont work.
div { animation: intro steps(14) 1s 1;
animation-fill-mode: forwards;
}
div.exit { animation: exit steps(18) 1s 1;
animation-fill-mode: forwards;
}
Any ideas?
It is working fine, you got it wrong in following code.
You forgot to add px after 500.
FIDDLE
#-webkit-keyframes exit {
0% {
left:500px;
}
100% {
left:0;
}
}
The animation is working, but you tell it to go to 0px.
If you say:
#keyframes exit {
0% { background:yellow; }
100% { background:black; }
}
It is working: http://jsfiddle.net/fsqp7vgk/1/
So, the animation is working, but you tell it again to go to position 0px. The solution is to specify in .exit {left:500px;} //your previous position.
Here it is with move animation: http://jsfiddle.net/fsqp7vgk/2/
.exit {animation:exit 5s 1; left:500px; }
#keyframes intro {
0% { left:100px; }
100% { left:500px; }
}
#keyframes exit {
0% { left:500px; }
100% { left:0px; }
}
Of course, keep -webkit- prefix if you use chrome.
Consider CSS3 animation with ship moving above blue div. For some reason the ship isn't moving. The HTML is as follows:
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
In order to make CSS3 animation I use the following:
#wrapper { position:relative;top:50px;width:700px;height:320px;
margin:0 auto;background:white;border-radius:10px;}
#sea { position:relative;background:#2875DE;width:700px;height:170px;
border-radius:10px;top:190px; }
#sea img {
position:relative;left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
#keyframes myship {
from {left: 480px;}
to{left:20px;}
}
#-moz-keyframes myship {
from {left: 480px;}
to {left:20px;}
}
#-webkit-keyframes myship {
from {left: 480px;}
to{left:20px;}
}
}
The ship image isn't moving. Any help is greatly appreciated.
you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.
http://jsfiddle.net/aNvSf/
your modified css looks like this:
#wrapper{
position:relative;
top:50px;
width:700px;
height:320px;
margin:0 auto;
background:white;
border-radius:10px;
}
#sea{
position:relative;
background:#2875DE;
width:700px;
height:170px;
border-radius:10px;
top:190px;
}
#sea img{
position:absolute;
left:480px;
top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}
#keyframes myship{
from {left: 480px;}
to{left:20px;}
}
#-moz-keyframes myship{
from {left: 480px;}
to{left:20px;}
}
#-webkit-keyframes myship{
from {left: 480px;}
to{left:20px;}
}
To animate with left, top, bottom or right, you either have to have a absolutely positioned or floated element. SO, Change the position to absolute.
Also, there was as unclosed braces } before you started to declare the keyframes.
#sea img {
position:absolute;
/* ... */
}
Braces Error:
#sea img{
position:absolute; /* absolute */
left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}
/* ^ You have to close the braces here, before declaring the keyframes.
Here is a working demo