Cool CSS3 animation for your website.

Posted on Posted in Blogs

I’m sure most of you have come across icons which do cool animations when hovered over. You may think they are very complicated to accomplish, or you’ll need a plugin. But they are indeed very simple and easy. That doesn’t even need javascript with the introduction of CSS3.

For example visit our site and scroll to the services section and hover over an icon.

Untitled

Here’s the css code.

.icon{
display:block !important;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.icon:hover{
border:5px solid:blue !important;
background-color:#d65050 !important;
}

.fa{
-webkit-animation: toLeftFromRight 0.3s forwards;
-moz-animation: toLeftFromRight 0.3s forwards;
animation: toLeftFromRight 0.3s forwards;
}
.icon:hover .fa{
color:#ffffff !important;
-webkit-animation: toRightFromLeft 0.3s forwards !important;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}

@-webkit-keyframes toRightFromLeft {
49% {
-webkit-transform: translate(100%);
}
50% {
opacity: 0;
-webkit-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toRightFromLeft {
49% {
-moz-transform: translate(100%);
}
50% {
opacity: 0;
-moz-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@keyframes toRightFromLeft {
49% {
transform: translate(100%);
}
50% {
opacity: 0;
transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@-webkit-keyframes toLeftFromRight {
49% {
-webkit-transform: translate(-100%);
}
50% {
opacity: 0;
-webkit-transform: translate(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toLeftFromRight {
49% {
-moz-transform: translate(-100%);
}
50% {
opacity: 0;
-moz-transform: translate(100%);
}
51% {
opacity: 1;
}
}
@keyframes toLeftFromRight {
49% {
transform: translate(-100%);
}
50% {
opacity: 0;
transform: translate(100%);
}
51% {
opacity: 1;
}
}

For more information visit w3schools site.

 

Hope this article was useful. Please like and share. And if you have a small business and want a website built, please contact us.

Comments

comments