I am trying to move my block element to left with animation and even use animation shorthand property but its not moving.
Here's my HTML:
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character"></div>
</div>
Here's my CSS:
#game{
width: 400px;
height: 500px;
border: 1px solid black;
margin: auto;
}
#block{
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: mblock 1s infinite linear;
-webkit-animation: mblock 1s infinite linear;
-moz-animation: mblock 1s infinite linear;
}
#-webkit-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#-moz-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#hole{
width: 50px;
height: 150px;
background-color: red;
position: relative;
left: 400px;
top: -500px;
animation: mblock 2s infinite linear;
-webkit-animation: mblock 2s infinite linear;
-moz-animation: mblock 2s infinite linear;
}
Here's the JSFIDDLE: https://jsfiddle.net/nwmLpdba/
Any idea what's causing this?
Removing the semi-colon would help.
#keyframes mblock {
0%{ left:400px; } /* no need to add semicolon at the end of the block*/
100%{ left:-50px; } /* no need to add semicolon at the end of the block */
}
#-webkit-keyframes mblock {
100%{ left:-50px };
}
#-moz-keyframes mblock {
100%{ left:-50px };
}
#keyframes mblock {
100%{ left:-50px };
}
please remove the 0%. Because 0% is already set in default class.
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo
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); }
}
I want to make an ajax loading animation using CSS3. All I want to do is to rotate these circles continuously with a constant speed. Here's what I did so far, but the problem is the animation somehow isn't being smooth; animation starts slow, is fast in between and ends slowly.
I read somewhere making animation-timing-function:linear; would do this; I did, but still now working. Still it is kind of easing animation.
Can anybody tell me how can I make this that way.
Markup:
<div class="ajax">
<div class="round outer"></div>
<div class="round inner"></div>
</div>
CSS:
.ajax {position: relative; }
.round {border: 5px solid #555; position: absolute; height: 40px; width: 40px; border-radius: 50%; }
.round.inner {margin: 12px; }
.round.outer {padding: 12px; }
.round.outer:before {content: ''; position: absolute; height: 7px; width: 5px; background: #fff; top: -5px; left: 29px;}
.round.inner:after {content: ''; position: absolute; border: 5px solid transparent; border-bottom: 7px solid #555; left: 15px; top: -15px; }
.round.inner:before {content: ''; position: absolute; width: 5px; height: 7px; background: #fff; bottom: -7px; left: 18px;}
#keyframes ajax-rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes ajax-rotate
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#keyframes ajax-rotate-c
{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
#-webkit-keyframes ajax-rotate-c
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
.ajax .round {
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
.ajax .round.inner{
animation: ajax-rotate 2s infinite;
-webkit-animation: ajax-rotate 2s infinite;
}
.ajax .round.outer{
animation: ajax-rotate-c 2s infinite;
-webkit-animation: ajax-rotate-c 2s infinite;
}
You need to specify easing function as linear
.ajax .round.inner{
animation: ajax-rotate 2s infinite linear;
-webkit-animation: ajax-rotate 2s infinite linear;
}
.ajax .round.outer{
animation: ajax-rotate-c 2s infinite linear;
-webkit-animation: ajax-rotate-c 2s infinite linear;
}
Here is the fiddle
I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions
The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
You can find more info about Keyframe Animations here.
Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
#keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
JSfiddle Demo
Try this CSS
#keyframes blink {
0% { color: red; }
100% { color: black; }
}
#-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
This is <span class="blink">blink</span>
You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
#keyframes blink { 50% { color: transparent; } }
#-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.
Fiddle: http://jsfiddle.net/2r8JL/
I'm going to hell for this :
=keyframes($name)
#-webkit-keyframes #{$name}
#content
#-moz-keyframes #{$name}
#content
#-ms-keyframes #{$name}
#content
#keyframes #{$name}
#content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
http://codepen.io/anon/pen/kaGxC (sass with bourbon)
Another variation
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink { 50% { visibility: hidden; }}
#keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>
If you want smooth blinking text or something a like you can use following code:
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
#keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
<span class="blinking">I am smoothly blinking</span>
It's working in my case blinking text at 1s interval.
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% { opacity: 0.4; }
}
if you want some glow effect use this
#keyframes blink {
50% {
opacity: 0.0;
}
}
#-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}
Please find below solution for your code.
#keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>