Hi friends,Today i am posting here a topic which is not part of programming.I have created one simple animation effect using HTML5 and CSS3.Many of you have tried it by your own.You may find it useful because this code is so simple.
CSS
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-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); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
HTML
Lets see how whole code will do.
<html>
<head>
<title>Text Effect</title>
<style>
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-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); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
</style>
</head>
<body>
<h1>This is<br/>Image Animation of Box</h1><br/><br/>
<img src="e:\2.jpg" alt="flipped" border="0"/>
</body>
store file with whatevername.html and run in browser.change image path with your image path in img tag.
CSS
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-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); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
HTML
Lets see how whole code will do.
<html>
<head>
<title>Text Effect</title>
<style>
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-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); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
</style>
</head>
<body>
<h1>This is<br/>Image Animation of Box</h1><br/><br/>
<img src="e:\2.jpg" alt="flipped" border="0"/>
</body>
store file with whatevername.html and run in browser.change image path with your image path in img tag.
No comments :
Post a Comment