I'm having an issue where my animations aren't working properly, but differently depending on the browser.
In Firefox, it scales and fades properly, but not from the proper origin. In Chrome, it fades, but does not scale.
I can't figure it out for the life of me.
Here is my JSFiddle
here is my CSS
path {
fill: white;
stroke: black;
stroke-width: 2;
}
.clone {
-webkit-animation: lookAtMe 0.75s ease-out infinite;
animation: lookAtMe 0.75s ease-out infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes lookAtMe {
100% {
-webkit-transform: scale(1.4, 1.4);
opacity: 0;
}
}
#keyframes lookAtMe {
100% {
transform: scale(1.4, 1.4);
opacity: 0;
}
}
any ideas?
Related
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:
HTML:
<div class="box"></div>
CSS:
body {
padding: 60px;
}
.box {
width: 100px;
height: 100px;
background-color: black;
animation-name: fadeIn, fall, elastic;
animation-timing-function: ease, ease-in, ease-out;
animation-duration: 1s, 0.5s, 0.5s;
animation-delay: 0s, 0s, 0.5s;
animation-fill-mode: forwards, forwards, forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fall {
0% { transform: translateY(-100px); }
100% { transform: translateY(0px); }
}
#keyframes elastic {
0% { transform: translateY(0px); }
20% { transform: translateY(60px); }
40% { transform: translateY(-20px); }
60% { transform: translateY(10px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.
Please refer to this fiddle: http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.
Any ideas why it wobbles so? Is there any way to fix it in IE11?
For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/
I was thinking about making an animation where, for example, a circle is falling from the top of the screen/website to the bottom and then it starts to rotate without end. I have the idea but I don't know how to describe it in CSS.
This is what I have done so far and get stuck:
#circle {
border-radius: 50%;
border-top-color: red;
width: 200px;
height: 200px;
bottom: 0px;
#circle {
animation-name: falling;
animation-duration: 5s;
#keyframes falling {
0% {
bottom: 100%;
}
50% {
bottom:0%;
}
100% {
transform: rotate(360deg);
}
I have no idea how I can make an iteration in the "100%" step. Please give me some advice
Demo Fiddle
You can chain animations in CSS by listing their settings in sequence after the relevant CSS animation properties.
Crucially you want to set the animation order, and their respective durations:
animation: falling 1s, rotate 2s;
Then queue them to start sequentially:
animation-delay: 0s, 1s;
So..the above basically says that the falling animation will last 1 second, play it immediately... then play the rotating animation after 1 second (when falling has finished)
It is also important to specify only playing the falling animation once, but loop the rotation:
animation-iteration-count: 1, infinite;
Importantly, dont reset the falling animation state on completion...so the circle stays at the bottom of the page, for the rotation..keep it cyclical:
animation-fill-mode: forwards, both;
HTML
<div id='circle'></div>
CSS
#circle {
border-radius: 50%;
border: 4px solid red;
width: 20px;
height: 20px;
bottom: auto;
position:absolute;
animation: falling 1s, rotate 2s;
animation-delay: 0s, 1s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, both;
-webkit-animation: falling 1s, rotate 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, both;
}
#keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
#-webkit-keyframes falling {
0% {
bottom: 100%;
}
100% {
bottom:0%;
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
I'm using a translate animation, but it doesn't work in Safari or Chrome. What am I doing wrong?
Here's my code, and a JSFiddle of it in action:
HTML
<div id="animate"></div>
CSS
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 10%;
background: gray;
-webkit-animation:move 6s ease infinite;
-moz-animation:move 6s ease infinite;
animation: move 6s ease infinite;
}
#keyframes move {
50% {
transform: translate(800px, 0px);
}
}
#-webkit-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
#-moz-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
Webkit still needs the -webkit prefix for transform:
#-webkit-keyframes move {
50% {
-webkit-transform: translate(800px, 0px);
}
}
Demo: http://jsfiddle.net/MLhYS/3/