Online: 12306
Online: 12306
Online: 12306
It moves the text from right side to left side using keyframe animation
<style>
h1 {
/*for chrome and safari*/
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
/*for firefox*/
-moz-animation-duration: 3s;
-moz-animation-name: slidein;
/*for opera*/
-o-animation-duration: 3s;
-o-animation-name: slidein;
/*Standard syntax*/
animation-duration: 3s;
animation-name: slidein;
}
@-webkit-keyframes slidein {
from {
margin-left: 80%;
width: 300%;
color: green;
}
50% {
font-size: 1000%;
margin-left: 25%;
width: 150%;
color: blue;
}
to {
margin-left: 30%;
width: 100%;
color: yellow;
}
}
@-moz-keyframes slidein {
from {
margin-left: 80%;
width: 300%;
color: green;
}
50% {
font-size: 1000%;
margin-left: 25%;
width: 150%;
color: blue;
}
to {
margin-left: 30%;
width: 100%;
color: yellow;
}
}
@-o-keyframes slidein {
from {
margin-left: 80%;
width: 300%;
color: green;
}
50% {
font-size: 1000%;
margin-left: 25%;
width: 150%;
color: blue;
}
to {
margin-left: 30%;
width: 100%;
color: yellow;
}
}
@keyframes slidein {
from {
margin-left: 80%;
width: 300%;
color: green;
}
50% {
font-size: 1000%;
margin-left: 25%;
width: 150%;
color: blue;
}
to {
margin-left: 30%;
width: 100%;
color: yellow;
}
}
</style>
</head>
<body>
<p><i>Animation with extra keyframe animation</i></p>
<h1>TechFunda</h1>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
In the above code snippet we have defined animation with keyframe moving text from right to left, we have webkit animation as 3s which animates in 3 seconds and webkit name as slidein, in the webkit keyframes slidein, we have three steps from margin left as 80% whiich starts form 80% with color green and at 50% with color blue and moves to margin left up to 30 % and changes color
output
Views: 4771 | Post Order: 105
