The .car1 moves only when using the #keyframes's from & to but not when using %. Can anyone explain why is that so?
.car1 {
animation: car1 2s 2 forwards;
position: absolute;
}
#keyframes car1 {
from {transform: translateX(550px)}
to {transform: translateX(-550px)}
}
.car2 {
position: absolute;
top: 0;
animation: car2 2s 2 forwards;
}
#keyframes car2 {
0% {top: 30px}
25% {top: 130px}
40% {top: 230px}
75% {top: 330px}
}
<div class="car1">Car1</div>
<div class="car2">Car2</div>
.car1 {
animation: car1 2s 2 forwards;
position: absolute;
}
#keyframes car1 {
0% {transform: translateX(550px)}
100% {transform: translateX(-550px)}
}
.car2 {
position: absolute;
top: 0;
animation: car2 2s 2 forwards;
}
#keyframes car2 {
0% {top: 30px}
25% {top: 130px}
40% {top: 230px}
75% {top: 330px}
}
<div class="car1">Car1</div>
<div class="car2">Car2</div>
Hey just set from 0% and to 100% in #keyframes car1 it works fine!
Related
I am mimicking the Windows 10 start up screen. For those of you familiar with the startup, I have the color transitions complete and one set of flickering text ("Hello!"). But I have no idea how to add new sets of text that will flicker following the ("Hello!") Text.
I've tried to research this but have had no success
The final question is how to flicker multiple sets of text one after another
.wrapper {
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 25s ease infinite;
-o-animation: rainbow 25s ease infinite;
animation: rainbow 25s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#Message {
color: #ffffff;
margin-top: 250px;
}
#keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-flicker {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
color: #ffffff;
margin-top: 250px;
}
#greet {
font-family: roboto;
font-weight: 150;
font-size: 30px;
}
<div class="wrapper">
<div class="animate-flicker" align="center">
<p id="greet">Hello!</h2>
</div>
</div>
I have translated your question in following requirements:
Show several words consecutively at the same spot.
Apply an animation on each word.
My animation displays an element 10 times for a short period of time and hides it again. animation-delay ensures that the animation on the second word starts after the first animation has finished and the animation on the third word starts after the second animation has finished.
To center words I positioned them absolute. This was necessary because I could not integrate display: inline; or display: none; in the keyframe animation (property display is not animatable).
span {
animation-name: flickerAnimation;
animation-duration: 0.1s;
animation-iteration-count: 10;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
#keyframes flickerAnimation {
0% {opacity: 1;}
80% {opacity: 1;}
81% {opacity: 0;}
100% {opacity: 0;}
}
<div class="wrapper">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
This is how it is being rendered in other browsers
This is how it is being renderd on IE11
I have used the following keyframing animation
.support_team_bubble{
height: 15px;
width: 15px;
position: absolute;
top: 33%;
left: 52.5%;
border-radius: 50%;
background: red;
-webkit-animation: bubbleMoveSupport 3.5s infinite;
-moz-animation: bubbleMoveSupport 3.5s infinite;
-o-animation: bubbleMoveSupport 3.5s infinite;
animation: bubbleMoveSupport 3.5s infinite;
-ms-animation: bubbleMoveSupport 3.5s infinite;
}
#-webkit-keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%;}
60% {top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%;}
90% {top: 25.9%;}
100% {left: 65.5%;}
100% {top: 25.9%;}
}
#keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%;}
60% {top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%;}
90% {top: 25.9%;}
100% {left: 65.5%;}
100% {top: 25.9%;}
}
<div class="support_team_bubble"></div>
Note: the above code is for top right (first chat bubble).
Is there something I need to take care of and I am missing in case on Internet explorer ?
It may be due to the multiple declarations of percentage keyframe points. Try combining your properties for duplicate keyframe points, like so:
.support_team_bubble {
height: 15px;
width: 15px;
position: absolute;
top: 33%;
left: 52.5%;
border-radius: 50%;
background: red;
-webkit-animation: bubbleMoveSupport 3.5s infinite;
-moz-animation: bubbleMoveSupport 3.5s infinite;
-o-animation: bubbleMoveSupport 3.5s infinite;
animation: bubbleMoveSupport 3.5s infinite;
-ms-animation: bubbleMoveSupport 3.5s infinite;
}
#-webkit-keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%; top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%; top: 25.9%;}
100% {left: 65.5%; top: 25.9%;}
}
#keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%; top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%; top: 25.9%;}
100% {left: 65.5%; top: 25.9%;}
}
<div class="support_team_bubble"></div>
This is the CSS code I'm using:
img {
position: relative;
-webkit-animation: movingImage infinite linear 2s infinite;
animation: movingImage infinite linear 2s infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
And the HTML that I have:
<img src="image.png" width="50" height="50" alt="Image">
The correct animation full syntax is:
#keyframes name | duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state
In your example:
animation: movingImage infinite linear 2s infinite;
The last infinite is not a valid value anymore, as you already declared it earlier.
The correct full syntax is:
animation: movingImage 2s linear 0s infinite normal none running;
Or the shorten version:
animation: movingImage 2s linear infinite;
JsFiddle Demo
img {
position: relative;
-webkit-animation: movingImage 2s linear infinite;
animation: movingImage 2s linear infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
<img src="image.png" width="50" height="50" alt="Image">
i have following code to move div into left,
But what i want is to move it to left and then again move it back,,This should auto play..any idea??
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Thank you!
You just need to add animation-direction: alternate. It will animate from the last keyframe value.
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: mymove 5s infinite alternate;
animation: mymove 5s infinite alternate;
position: absolute;
-webkit-backface-visibility: hidden;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div></div>
the following code should work
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
#keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
<div></div>
I'm trying to animate a tractor moving across the screen. I've got it working perfectly on my screen, however I want it to work across different platforms (only included -webkit-). When I re-size, the tractor is fluid, but the wheels aren't. How can I make them adjust together?
<body>
<div class="container">
<div class="tractor">
<img src="img/tractor-700px.png" alt="tractor">
</div>
<div class="wheels">
<div class="b_wheel">
<img src="img/b_wheel.png">
</div>
<div class="f_wheel">
<img src="img/f_wheel.png">
</div>
</div>
</div>
Here's my main CSS:
.tractor {
width: 380px;
position: absolute;
top: 40%;
left: -5%;
}
.tractor img {
width: 100%;
}
.tractor::after {
content: "";
display: block;
width: 120px;
height: 120px;
background: url('img/steam.png') no-repeat;
background-size: 120px;
position: absolute;
top: -37%;
left: 56%;
opacity: 0;
}
.f_wheel {;
width: 125px;
position: absolute;
top: 66.5%;
left: 13%;
}
.f_wheel img {
width: 100%;
}
.b_wheel {
width: 190px;
position: absolute;
top: 58.8%;
left: -7%;
}
.b_wheel img {
width: 100%;
}
And CSS for the animation:
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor::after {
-webkit-animation: steam 4s 2s infinite;
}
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
}
.f_wheel {
-webkit-animation: front-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
.b_wheel {
-webkit-animation: back-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
/* Keyframes - WebKit only
------------------------------------------ */
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
#-webkit-keyframes tractor-go {
100% { left: 70%; }
}
#-webkit-keyframes steam {
40% { opacity: .8; }
60% { opacity: 1; }
100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
#-webkit-keyframes wheel-spin {
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
#-webkit-keyframes front-wheel-go {
100% { left: 88%; }
}
#-webkit-keyframes back-wheel-go {
100% { left: 68.5%; }
}
JSFiddle to show it in action: http://jsfiddle.net/0j5L92vh/1/
[PS - This is my first post here so many thanks in advance! Let me know if I need to include anything else.]
I found a solution to your problem.
I utilized the .container div you have provided to keep everything positioned relative
to your tractor image. You can see the changes in the css code that made will make
it work in non webkit browsers. It will not work on versions of Internet Explorer before number 9.
The changes I have made are only to your css.
jsfiddle: http://jsfiddle.net/larryjoelane/h324j6u6/113/
css:
.container{
width: 380px;
position: relative;
/*bind the animation and set its properties*/
-webkit-animation: tractor 10s linear 0s; /* Chrome, Safari, Opera */
animation: tractor 10s linear 0s;
}
/*bind the wheel-spin animation*/
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
animation: wheel-spin 10s ease-in-out forwards;
}
/*bind the tractor bounce-animation*/
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor img{
width:100%;
}
.b_wheel {
width: 190px;
position: relative;
top: -120px;
left: -7%;
}
.b_wheel img {
width: 100%;
}
.f_wheel{
width: 125px;
position:relative;
top: -258px;
left: 65%;
}
.f_wheel img {
width: 100%;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/* Standard syntax */
#keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/*standard browser animation*/
#keyframes wheel-spin{
0% { transform: translateX(0px) rotate(50deg); }
100% { transform: translateX(0px) rotate(480deg); }
}
/*webkit browser animation*/
#-webkit-keyframes wheel-spin{
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
/*webkit tractor-bounce animation*/
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
/*standard tractor-bounce web browser animation*/
#keyframes tractor-bounce {
50% { transform: rotate(-5deg) translateY(-3px); }
}