Menu
I am playing with some animations, but it won't work at all. It has to be a bounce animation. This is my first time working with it. So I hope I don't make very bad mistake
This is mine .html file:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="logo"><img src="Header_red.png"/></div>
<div class="intro"><p>some text</p></div>
</body>
</html>
This is my .css file:
html{
background: url(background.jpg) no-repeat center center fixed;
overflow:hidden;
}
.logo
{
text-align:center;
margin-left:auto;
margin-right:auto;
animation-delay:1.2s;
animation-duration:4.8s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
.intro{
text-align:left;
margin-left:100px;
margin-right:auto;
animation-duration:5.5s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
@keyframes logo {
0%{transform:
translate(000px, 1500px);}
20%
{
transform:translate(000px, 235px);
}
25%
{
transform:translate(000px, 265px);
}
65%
{
transform:translate(000px, 265px);
}
100%
{
transform:translate(000px, -300px);
}
}
@keyframes intro{
0% {transform:
translate(000px, -400px);}
65% {transform:
translate(000px, -165px);}
100% {transform:
translate(000px, -135px);}
}
I hope someone could help me! Thanks!
412
You need to add prefixes for browser support:
Keyframes CSS
@keyframes logo
{
//animate
}
@-moz-keyframes logo /* Firefox */
{
//animate
}
@-webkit-keyframes logo /* Safari and Chrome */
{
//animate
}
@-o-keyframes logo /* Opera */
{
//animate
}
@-ms-keyframes logo /* IE */
{
//animate
}
Element CSS
animation: value;
-moz-animation: value; /* Firefox */
-webkit-animation: value; /* Safari and Chrome */
-o-animation: value; /* Opera */
-ms-animation: value; /* IE */
If you are using a CSS compiler such as SCSS or LESS you could create a mixin for the above:
@mixin animate($val){
animation:$val;
-moz-animation:$val;
-webkit-animation:$val;
-o-animation:$val;
-ms-animation:$val;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
