I use CSS Animation and media queires like this!
HTML
<div class='block'>
<div class='block-bar'></div>
</div>
CSS
.block-bar {
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}
it work correctly in Chrome and Firefox but not working in IE
How to fix it? Thank you.
The problem is that IE doesn't like it when keyframes are defined within mediaqueries. If you pull the definition for the keyframes outside the mediaquery it works. (Tested in IE11)
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#media(min-width: 300px){
.block-bar {
height: 50px; background-color: red;
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}
Related
This code used to work fine in Google Chrome last time but now it doesn't work anymore. The bars will fill up by a solid colour animating (2 seconds) in when you scroll it in view.
Internet Explorer works fine.
Any help, please? I've tried looking around but to no avail.
.levelPM {
height: 25px; /* IE CSS Variables Fallback */
height: var(--bar-h);
width: 0px;
background: #7ae89f; /* IE CSS Variables Fallback */
background: var(--projectmanage-col);
}
.projectmanage.start {
-webkit-animation: projectmanage 2s ease-out forwards;
-moz-animation: projectmanage 2s ease-out forwards;
-o-animation: projectmanage 2s ease-out forwards;
animation: projectmanage 2s ease-out forwards;
}
#-webkit-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#-moz-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#-o-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
Full code: https://pastebin.com/TegPh7pf
Chrome will not trigger the scroll if the page has no scroll, use "bind (wheel)" instead.
$(window).bind("wheel", function() {
console.log("asdads")
checkAnimation2();
});
Live example: https://codepen.io/dobladov/pen/aXZpNP
I have an Animated Progress Bar that works fine, but I want to have more than one with different percentages I have had a go at this with no look I have added a jsfiddle below.
Jsfiddle Demo: https://jsfiddle.net/8sja2577/
<p><span class="subtitle"><h3>bar1</h3></span></p>
<div id="progressbar"><div id="other" ><div id="pbaranim"></div></div></div>
<p><span class="subtitle"><h3>bar2</h3></span></p>
<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>
CSS
#progressbar {
width: 100%;
height: 21px;
background-color: #ccc;
padding: 2px;
margin: .6em 0;
border: 1px #000 double;
clear: both;
border-radius:20px;
}
#progress {
border-radius:20px;
background: red; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#other {
border-radius:20px;
background: red; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
filter: alpha(opacity=25);
#-webkit-keyframes other { from { } to { width: 100% }}
#-moz-keyframes other { from { } to { width: 100% }}
#-ms-keyframes other { from { } to { width: 100% }}
#keyframes other { from { } to { width: 100% }}
#-webkit-keyframes progress { from { }to { width: 36% }}
#-moz-keyframes progress { from { } to { width: 36% }}
#-ms-keyframes progress { from { } to { width: 36% }}
#keyframes progress { from { } to { width: 36% }}
You need to change the other style to use the other animation:
#other {
border-radius:20px;
background: red;
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: other 2s 1 forwards;
-moz-animation: other 2s 1 forwards;
-ms-animation: other 2s 1 forwards;
animation: other 2s 1 forwards;
}
Fixed fiddle (using classes instead of ids)
Please note that ids should be unique and h3 cannot be a child of either a p or a span
Id of progressbars is uniqe , you must change other progressbars id to work it successfully
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); }
}
Here is the code, I really dont understand what is wrong.
I also tried using -webkit- but did not make any difference trying to move the objects accross the screen, simple animation
HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
CSS:
.cloud {
background: url(../image/cloudskills.svg)no-repeat;
height:100px;
width:130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(../image/balloonworks.svg)no-repeat;
width: 100px;
height: 130px;
text-indent: -999em;
animation: balloon 5s linear infinite;
}
#keyframes balloon{
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
Js Fiddle
for the elements to make some animation position should be given so aboslute or relative or you can use margin in keyframes to move the element
.cloud {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
height:100px;
width:130px;
background-size:100px auto;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
background-size:100px auto;
width: 100px;
height: 130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes balloon {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
I changed only a bit of your code http://jsfiddle.net/2gbngtxp/
#-webkit-keyframes cloud {
0% {
left: 0;
}
50% {
margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/
}
100%{
left:0;
}
Hi I've been trying to do a simple animation with css and a sprite, and it doesn't seem to work. Am I missing something? I've made a JS Fiddle sample.
Can some one explain me why this doesnt work?
http://jsfiddle.net/CmF6A/
<body>
<div id="wrapper">
<div id="bike">
</div>
</div>
</body>
div#wrapper {
width: 64px;
height: 80px;
background-color: #c0b898;
margin: auto;
}
#-webkit-keyframes running {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: running 1s steps(6, end) infinite;
}
There seems to be a problem with your animation name if you renamed it to something else it works.
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: anim 1s steps(6, end) infinite;
}
#-webkit-keyframes anim {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
An example: http://jsfiddle.net/CmF6A/2/
Here is a JSfiddle :)
I have simply updated your own fiddle.
http://jsfiddle.net/CmF6A/5/
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
from {background-position:0px;}
to {background-position:-320px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-position:0px;}
to {background-position:-320px;}
}
Check out this tutorial to create Sprite sheet animation
https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}