Dream Of Code: Why would you walk when you can fly? (CSS)

/*
Watch the 4 second video : https://youtu.be/KkJJjLlsV1c
This is some pretty cool CSS animations.
Please check out the link , you do not want to miss this !
*/

<html>
<head>
<style>
.card{
left: 17%;
width: 30%;
height:20%;
box-shadow: 0 1px 2px #aaa;
background: red;
border-radius: 5px;
-webkit-animation: fly 1.5s 1s ease both;
animation: fly 1.5s 1s ease both;
}
.card1{
left: 17%;
width: 30%;
height:20%;
box-shadow: 0 1px 2px #aaa;
background: blue;
border-radius: 5px;
-webkit-animation: fly1 1.5s 1s ease both;
animation: fly1 1.5s 1s ease both;

}

@keyframes fly {
from {
transform-origin:50% 50%;
transform:translateX(100vw) translateY(10em) rotate(-180deg);
opacity:0;
}
}

@-webkit-keyframes fly {
from {
-webkit-transform-origin:50% 50%;
-webkit-transform:translateX(100vw) translateY(10em) rotate(-180deg);
opacity:0;
}
}

@keyframes fly1 {
from {
transform-origin:50% 50%;
transform:translateX(-100vw) translateY(10em) rotate(-180deg);
opacity:0;
}
}

@-webkit-keyframes fly1 {
from {
-webkit-transform-origin:50% 50%;
-webkit-transform:translateX(-100vw) translateY(10em) rotate(-180deg);
opacity:0;
}
}

</style>
</head>
<body>
<center>
<div class="card" style="align:left">
This will fly
</div>
<div class="card1" style="align:right">
This will fly
</div>
<div class="card">
This will fly
</div>
<div class="card1">
This will fly
</div>
<div class="card">
This will fly
</div>
</center>
</body>
</html>

Dream Of Code

Wednesday, 4 November 2015

Why would you walk when you can fly? (CSS)

No comments:

Post a Comment