CSS animate css - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution
join us

animate using css


 1077

Show ResultCSS


6

<!DOCTYPE html>
<html>
<head>

<style>

.heart {
position: relative;
width: 100px;
height: 90px;
margin: 30px;

-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transition: all 1s;
}
.heart.css {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-dely:1s;
}
.heart.animated {
-webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
-moz-animation: 1600ms pulsate infinite alternate ease-in-out;
-ms-animation: 1600ms pulsate infinite alternate ease-in-out;
-o-animation: 1600ms pulsate infinite alternate ease-in-out;
animation: 1600ms pulsate infinite alternate ease-in-out;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
.heart.css:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
-webkit-animation:'';
-moz-animation:none;
-ms-animation:'';
-o-animation:'';
animation:'';
}

@keyframes pulsate {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@-webkit-keyframes pulsate {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.3); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate {
0% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.3); }
100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulsate {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.3); }
100% { -ms-transform: scale(1); }
}
@-o-keyframes pulsate {
0% { -o-transform: scale(1); }
50% { -o-transform: scale(1.3); }
100% { -o-transform: scale(1); }
}

</style>

</head>

<body>

<div class='heart animated css'></div>

</body>

</html>


By        
The power of the user (%)
79%



The most helpful CSS solutions

How to set bootstrap popover borders in css ?How to set bootstrap popover borders in css ?CSS

Click to see more ...

  1.2K     91

animate using cssanimate using cssCSS

Click to see more ...

  1.1K     83

How to create a cylinder using css ?How to create a cylinder using css ?CSS

Click to see more ...

  1.4K     79

How set border bottom using css ?How set border bottom using css ?CSS

Click to see more ...

  1.1K     69

How to set the starting position of a background image using css ?How to set the starting position of a background image using css ?CSS

Click to see more ...

  569     48

center a fixed element on the pagecenter a fixed element on the pageCSS

Click to see more ...

  707     48

css style browser scrollbarcss style browser scrollbarCSS

Click to see more ...

  458     39

How to overline text using css ?How to overline text using css ?CSS

Click to see more ...

  234     32

How to underline text using css ?How to underline text using css ?CSS

Click to see more ...

  256     26

How to set the cursor pointer of an element using css ?How to set the cursor pointer of an element using css ?CSS

Click to see more ...

  262     26

Welcome aboard!
We are happy you are here and
wish you good net-raft!