I am a novice in html5 and css3 and I am just playing around with the different css3 animation features. Could anyone kindly point out the error in the code below? The movement from left 0px to left 200px isn't working.
<!doctype html>
<html>
<head>
<title>
Experiment: animation with movements
</title>
<style>
footer{
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {left:50px;}
to {left:200px;}
}
#keyframes mymove {
from {left:50px;}
to {left:200px;}
}
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
Add position: relative; to the footer CSS
footer {
position: relative;
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
<footer></footer>
Related
im trying to apply 2 animations to my object. I tried to add one of my animations to div and another one to my div's child box. Box's animation works well but whenever i tried to add one more animation to my box its not working so i tried to add my other animation to div. But it didn't work too. Here is my code:
<style>
div{
animation-name: dropMove;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#box{
color: red;
margin: auto;
width: 100px;
height: 100px;
border: 25px solid;
border-radius: 100%;
animation-name: colorChanger;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes colorChanger {
0%{
color: red;
}
33.3%{
color: blue;
}
66.3%{
color: green;
}
99.3%{
color: red;
}
}
#keyframes dropMove {
50%{
top:100px;
}
100%{
top: 1px;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
my colorChanger animation works fine but dropMove does not work.
Thanks in advance :)
I have a png file of flags that I want to animate moving to the right side, off the screen then back onto the screen from the left side. Is there something in css that works for this specific purpose? or do I have to get creative with the design?
I have used keyframe animation to move the image from left to right so I can understand more about how animation works in css but I am still struggling.
<head>
<link rel="stylesheet" href="Ufatrue.css">
<title>Bashkorostan</title>
</head>
<body bgcolor="#E1E4E6">
<div id="Top">
<img src="Top.png" alt="7 Flags" align="middle">
</div>
<div id="Title">
<h>Volga Federal District News</h>
</div>
#Top {
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% {left: -300px; top: 0px;}
25% {left: -300px; top: 0px;}
50% {left: 300px; top: 0px;}
75% {right: -300px; top: 0px;}
100% {right: 300px; top: 0px;}
}
You can use just marquee tag for HTML.
.box{
width:10em;
height:10em;
background:dodgerblue;
}
<marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" direction="right" scrollamount="50" scrolldelay="1"><div class="box"></div></maruquee>
I am not sure i understand exactly what you want. But take a look at the snippet below and please comment in the comment section below and tell me if this is what you wanted
.wrapper {
overflow: hidden;
}
#top {
position: relative;
animation: myanimation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
height: 100px;
width: 100px;
background: red;
}
#keyframes myanimation {
0% {
left: 0;
transform: translateX(-100%)
}
100% {
left: 100%;
transform: translateX(100%)
}
}
<div class="wrapper">
<div id="top">
</div>
</div>
What about this?: https://jsfiddle.net/wwWaldi/tadyh6p9/14/
#Top {
width: 30px;
height: 30px;
background: blue;
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% { right: 0; }
25% { right: -120%; }
85% { visibility: hidden; }
90% {
left: -20%;
visibility: visible;
}
100% {
left: 0;
}
}
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
I am a newbie i just want to add fadeout in my text moving after it already finish moving. but the problem is i already put the #keyframe fadeout. and .fadeout. but it didnt work. Any help please? Thank you. This is the code.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 8s;
-webkit-animation: move 8s;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
Unless you've got a reason to split it up you could just put it all in the same animation by adding one more step to it like this:
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 3s forwards;
-webkit-animation: move 3s forwards;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
opacity: 1;
}
to {
opacity: 0;
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
I am trying to make a simple animation where a paragraph tag loops around a div. Currently, I can't get the animation to play at all. After some looking, I saw a few other questions on SO where the solution was to add vendor prefixes. I'm on Chrome, so I added that prefix. That didn't work. I saw another where I needed to add the vendor prefix to the animation property, so I tried that. That didn't work, either.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<main>
<div class="box">
<p class="animated">Hello</p>
</div>
</main>
</body>
</html>
And my css in css/main.css:
.box {
width: 500px;
height: 500px;
background-color: #ddd;
}
#keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
#-webkit-keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
p {
display: inline-block;
background-color: red;
color: white;
padding: 10px;
margin: 0;
}
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s linear infinite;
}
I have a codepen of it here: http://codepen.io/khall47/pen/pNogKz
When you change the left/top property values on an element, it needs to have a position or else nothing happens, so ..
..give the .animated rule position: relative; and it will work fine.
Updated codepen: http://codepen.io/anon/pen/gLOrwy
Side note, always put prefixed properties before non-prefixed in your CSS rules
Just add to your paragraph. It's because it's not declared in relative that it doesn't move. (neither on firefox)
position: relative;
In addition to other answers, if you want to have the same animation-timing-function for all the browser, you should give the same for all in .animated CSS block.
They both should be either:
.animated {
animation: around 4s linear infinite;
-webkit-animation: around 4s linear infinite;
}
or
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s ease-out infinite;
}