<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*애니메이션 생성*/
@keyframes coinFlip {
0% {
transform: rotateX(0);
}
50% {
transform: rotateX(180deg) translateX(100px);
}
100% {
transform: rotateX(0);
}
}
img {
border: 5px solid black;
border-radius: 50%;
width: 100px;
/* 5초 동작하고 멈춤
animation: coinFlip 5s ease-in-out;
*/
/* 무한으로 동작*/
animation: coinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
</body>
</html>
아래 사이트에서 더 다양하게 찾아 볼 수 있다
'HTML_CSS' 카테고리의 다른 글
| CSS - 상단바 깔끔하게 좌우 가운데 정렬 (0) | 2021.04.29 |
|---|---|
| CSS 방법론 BEM 방식 (0) | 2021.04.28 |
| CSS - Media Query 예제 (0) | 2021.04.18 |
| CSS - transition 예제 (0) | 2021.04.17 |
| CSS - Transitions Site (0) | 2021.04.03 |