KokoaTalk Clone Coding: animations 1
<head>
<style>
@keyframes SuperSexyHotcoinflip { I want to have the animation playing all the time(write animation name you want)
from { first step
transform: rotateY(0);
}
to { last step
transform: rotateY(360deg) translateX(200px) translateY(200px)
scale(1.5);
}
}
mg {
border: 5px solid black;
border-radius: 45px;
animation: SuperSexyHotcoinflip 3s linear infinite;
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
</body>
But everything goes back to way before.
@keyframes SuperSexyHotcoinflip {
0% { not from - to
transform: rotateY(0);
}
50% {
transform: rotateY(360deg) translateX(200px) translateY(200px)
scale(1.5);
}
100% {
transform: rotateY(0);
}
}
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes SuperSexyHotcoinflip {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(180deg) skewX(360deg) skewY(1rad);
}
50% {
transform: rotateZ(0deg) scale(3);
}
100% {
transform: rotateZ(0);
}
}
img {
border: 5px solid black;
border-radius: 45px;
animation: SuperSexyHotcoinflip 3s linear infinite;
width: 100px;
}
</style>
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes SuperSexyHotcoinflip {
0% {
transform: rotateX(0);
}
25% {
transform: rotateX(360deg) scale(3);
}
50% {
transform: rotateX(0deg);
border-color: #f7df17;
}
75% {
transform: rotateX(-360deg) scale(3);
border-color: #f7df17;
}
100% {
transform: rotateX(0);
}
}
img {
border: 5px solid black;
border-radius: 45px;
animation: SuperSexyHotcoinflip 5s ease-in-out infinite;
width: 100px;
}
</style>
