Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;
Related
I'm trying to play different css animations one after another but I can't figure out how to.
Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.
Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
And then run another one, show it for 15 seconds and move on.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">
The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:
the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...
It will be more clear once you see it in action here:
.animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
animation-duration: 20s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
6% {
opacity: 1;
transform: translateX(30px);
}
8% {
transform: translateX(-10px);
}
10% {
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(0);
}
42% {
opacity: 1;
transform: translateX(30px);
}
55% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
50% {
opacity: 0;
transform: translateY(-2000px);
}
56% {
opacity: 1;
transform: translateY(30px);
}
58% {
transform: translateY(-10px);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
92% {
opacity: 1;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">
Using animation-delay.
animation: a, b;
animation-duration: 2s, 2s;
animation-delay: 0s, 4s;
The animation b will start after 4s while animation a will start without any delay.
animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.
You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.
var animations=["bounceInLeft","bounceInDown"],
count=animations.length,
classlist=document.querySelector("img").classList,
holder=document.createElement("div"),
style=window.getComputedStyle(holder),
delay=15,
current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
wait=0;
x=0;
while(x<count){
setTimeout(function(a){
classlist.remove(current);
classlist.add(a);
current=a;
},wait*1000,animations[x]);
holder.className=animations[x];
wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
x++;
}
setTimeout(animate,wait*1000);
};
img{
animation-fill-mode:both;
height:200px;
width:300px;
}
.bounceInDown{
animation-duration:1s;
animation-name:bounceInDown;
}
.bounceInLeft{
animation-duration:2s;
animation-name:bounceInLeft;
}
#keyframes bounceInDown{
0%{
opacity:0;
transform:translateY(-2000px);
}
60%{
opacity:1;
transform:translateY(30px);
}
80%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
#keyframes bounceInLeft{
0%{
opacity:0;
transform:translateX(-2000px);
}
60%{
opacity:1;
transform:translateX(30px);
}
80%{
transform:translateX(-10px);
}
100%{
transform:translateX(0);
}
}
<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
I have managed to achieve something similar by adapting this concept by Noah Addy: http://digitalfio.github.io/Stagger.css/
You will need to work on the timings a bit to get the 15sec delay you want, but other than that it should be fairly straightforward.
I'm trying to use CSS animations to animate a cube rotating, and pausing on each face for a set amount of time.
Pen here
#keyframes frontToLeft {
75% { transform: rotateY(0); }
100% { transform: rotateY(90deg); }
}
#keyframes leftToBack {
75% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}
#keyframes backToRight {
75% { transform: rotateY(180deg); }
100% { transform: rotateY(270deg); }
}
#keyframes rightToFront {
75% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.cube-container {
padding-top: 200px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.qube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 2s, 2s, 2s, 2s;
animation-delay: 2s, 4s, 6s, 8s;
* {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
}
<div class="cube-container">
<div class="qube">
<div class="front">front</div>
<div class="left">left</div>
<div class="back">back</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
In Google Chrome and Edge, the animation seems to glitch, but in Firefox it works as intended.
I'd like the outcome to be:
Front Face - Pause 2 seconds, rotate 2 seconds
Left Face - Pause 2 seconds, rotate 2 seconds
Back Face - Pause 2 seconds, rotate 2 seconds
Right Face - Pause 2 seconds, rotate 2 seconds
Can anyone see where this would be going wrong? I have the Codepen preprocessing SCSS with prefixes.
Thanks in advance!
From what I can tell testing this it looks like a bug. Nothing I've tried seems to work to correct the animation. Like you say, Firefox works as expected.
All I can think of as a potential fix is to combine it into one animation something like this:
#keyframes spinCube {
20% { transform: rotateY(0deg); }
25% { transform: rotateY(90deg); }
45% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
70% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
95% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.qube {
animation: spinCube 8s 1 forwards;
}
It would take a bit of tweaking to get the timing right, but it's the only thing I can think of.
Here's a CodePen Example of this alternative solution.
I have a rotate animation that I am symbolizing that something is loading. This works great (except it doesn't rotate continuously, it kind of stops some when it has went around 360 degrees), but on some phones (I have an android note 4) it doesn't spin at all. Then on others (iphones) my circle actually rotates like it is swinging or it is fixed at one corner of the circle and it spins from that axis.
I have webkits in my code and I have the img set to this:
#spinning-circle img {
width: 100%;
height: auto;
}
Why would my image be doing these things. I can give the web url to see this live if you want to see it in a mobile setting.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width:640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 50px;
height: 50px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: blue;
font-size: 1.5em;
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You need to use prefixed -webkit-transform in prefixed #webkit-keyframes and not-prefixed transform in not-prefixed #keyframes. And also you need to add prefixed -webkit-animation.
If you want animation doesn't stop at the end, you could use animation-timing-function: linear, but then animation'll have a constant speed.
You don't need to duplicate #keyframes and other properties inside #media screen {}.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
-webkit-animation: spinning-circle linear 2s infinite;
animation: spinning-circle linear 2s infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width: 640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
width: 50px;
height: 50px;
}
#spinning-circle-title {
color: blue;
font-size: 1.5em;
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You have to add animation-timing-function: linear; in your animation definition.
Here you have a code working https://jsfiddle.net/xhurpqLd/
-- EDIT --
You also have
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
}
}
You only define the transform for webkit. Change to
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
transform: rotate(360deg) ;
}
}
Here you have the updated code https://jsfiddle.net/xhurpqLd/3/. It works on my Android.
You can also add -ms-transform for IE support.
Lines 731-733 and 1391-1393 of main-style.css appear to be causing the swinging problem.
*::after, *::before {
content: '';
}
should be
*::after, *::before {
content: '';
display: table;
}
assuming you're trying to use this clearfix method
I set up a simple css animation, to make a circle grow, but it does not start. What is wrong?
js fiddle
HTML
<ul><li></li></ul>
CSS
li {
position: absolute;
height: 70px;
width: 70px;
display:block;
border: 5px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
animation: growUp 1s;
animation-iteration-count: infinite;
}
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
You are using the wrong prefixes for your keyframes.
Try changing:
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
to
#keyframes growUp {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
That should fix your animation.
Read up here to see what prefixes you should use and where: http://shouldiprefix.com/
Updated fiddle as well: http://jsfiddle.net/6c79780r/4/
For completeness - the webpage "Should I Prefix" states you should prefix for animations like so: You can set it up this way for all prefixes as well.
#-webkit-keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
#keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
.example.is-animating {
...
-webkit-animation: MyAnimation 2s; /* Chr, Saf */
animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}
A complete and comprehensive breakdown of the CSS3 animation property can be found here: http://css3files.com/animation/
It seems that there is an issue with Chrome and Safari when there is an element with position:fixed contained in an element with position:relative and any element on the page has -webkit-transform. There is a rendering issue, which is a bit hard to explain but you can see it here: http://jsfiddle.net/ragulka/byGGH/1/
Code:
<div id="sticky-container">
<div id="sticky">
<div class="test"></div>
</div>
</div>
<div id="long">
<button class="pull-right">Change color</button>
<ol>
<li>1. Click change color. The color changes.</li>
<li>2. Scroll down so that the red box is just half-way over the gray area.</li>
<li>3. Click change color again. The color does not change.</li>
<li>4. Scroll down even more. The color changes while you scroll.</li>
</ol>
</div>
<i class="icon-spin">H</i>
<style type="text/css">
#sticky-container {
height: 50px;
position: relative;
z-index: 100;
}
#sticky {
background: red;
height: 50px;
width: 100px;
}
button {
margin-top: 100px;
}
#sticky.blue {
background: blue;
}
#long {
height: 1000px;
background: silver;
position: relative;
z-index: 0;
}
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
width: 10px;
height: 10px;
background: yellow;
position: absolute;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('#sticky').affix(100);
$('button').on('click', function() {
$('#sticky').toggleClass('blue');
});
})
</script>
This works fine in Firefox. Haven't tested in IE.
Does anyone else have the same issue, is it a known bug or am I doing something wrong?