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;
}
Related
I did the animation to rotate around a button, I do not know the tags so well, so I'll probably have many errors in my codes: '(
What annoys me today is that it is not rotating in IE11, I tested in Windows 7 and Windows 10, any browser opens normally, until Edge performs as programmed, except IE11,
The URL of the page in question is http://hb1virtual.com.br/Grafica/
Could someone tell me where I'm going wrong?
(there will be many errors, but this one especially, laughs)
HTML
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
CSS
There are some CSS mistakes in your animation code.
I try to add a new css code segment and try to apply it on your web page to make it work for IE 11.
Code:
<!doctype html>
<head>
<title></title>
<style>
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
.clockwise {
-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;
}
#-webkit-keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}#keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="menu">
<div class="clockwise">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
</body>
</html>
Output in IE 11:
Further, you can try to check the code and try to modify it in your site.
You can refer the example below.
JS Fiddle Example
First, you should change your Title from Portuguese to English.
Second, You can always inject code into your html, blocking IE users from seeing your website, redirecting them to download another browser.
Nobody uses IE anyway... It's not solving the problem, it's avoiding the question, but it's a solution.
Cheers
Question
let's if i have the following example
A-------------B------------C
how i can start an animation from the middle ( B ) then it go to A then to B and finaly it go to C , i made an example but it's not working good.
Code
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
100%{
left: 400px;
}
}
.line:after {
-webkit-animation: move 1s alternate infinite;
-moz-animation: move 1s alternate infinite;
-ms-animation: move 1s alternate infinite;
-o-animation: move 1s alternate infinite;
animation: move 1s alternate infinite;
}
<div class="container">
<div class="line"></div>
</div>
If you do it this way, I thinks it's working well.
In stead of alternate I did use linear. It makes the animation smoother.
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
75%{
left: 400px;
}
100%{
left: 200px;
}
}
.line:after {
-webkit-animation: move linear 1s infinite;
-moz-animation: move linear 1s infinite;
-ms-animation: move linear 1s infinite;
-o-animation: move linear 1s infinite;
animation: move linear 1s infinite;
}
<div class="container">
<div class="line"></div>
</div>
You could do it like this, also if add linear (because default is ease) you will get something like this Fiddle
.container .line {
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
animation: move 3s infinite;
}
#keyframes move {
0% {left: 200px;}
25%{left: 0px;}
50% {left: 200px;}
75% {left: 400px;}
100%{left: 200px;}
}
<div class="container">
<div class="line"></div>
</div>
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 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; }
}
}