Hii,
i am sharing an example of css animation effect in which the basic concept of this animation is an easing function which is used here to show cubic bezier effect which is providing the movement of image .
here's the code given below:
CSS:
body{
width:100%;
background-color:red;
}
.home{
background-image:url("./img/home.jpg");
width: 1197px;
height: 682px;
margin:0 auto;
}
.home:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="home"></div>
</body>
</html>
0 Comment(s)