<!-- animation 3 -->
<div class="black-box">
<div class="box-text1">Menu</div>
<div class="box-text2">Item</div>
</div>
a -> b 단반향 애니메이션을 구현할 땐 : transition;
a -> b -> c <- d 양뱡향 애니메이션을 구현할 땐: @keyframes 이름 { };
transition, @keyframes을 통한 애니메이션 중첩이 가능하다.
@keyframes 이름 { }; 적용시
.ani-text:hover {
animation-name: 이름;
}
/* animation 3 */
@keyframes 왼쪽에서오른쪽 {
0% {
transform: translateX(0px),;
}
50% {
transform: translateX(100px) skew(-30deg);
}
/* 75% {
transform: translateX(50px);
} */
100% {
transform: translateX(0px);
}
}
html {
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
}
.black-box {
text-align: right;
padding: 100px 30px;
position: fixed;
width: 33%;
height: 100%;
background-color: black;
color: white;
transform: translateX(-150px);
transition: all 1s;
}
.black-box:hover {
transform: translateX(0px);
text-align: center;
}
.black-box:hover .box-text2 {
animation-name: 왼쪽에서오른쪽;
animation-duration: 0.8s;
}
.box-text1 {
font-size: 30px;
}
.box-text2 {
margin-top: 30px;
font-size: 25px;
}
<!-- 예시 -->
<h4 class="ani-text">안녕하세요</h4>
좌우 움직임 구현할 땐: transform: translateX();
/* 예시 */
@keyframes 왔다갔다 {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(-100px);
}
75% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
.ani-text {
text-align: center;
}
.ani-text:hover {
animation-name: 왔다갔다;
animation-duration: 1s;
}
<div class="container">
<button class="ani-button">흔들버튼</button>
</div>
좌우 회전을 해주고 싶을땐: transform: rotate();
/* animation 1 */
@keyframes 요리조리 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-8deg);
}
50% {
transform: rotate(8deg);
}
75% {
transform: rotate(-8deg);
}
100% {
transform: rotate(0deg);
}
}
.container {
display: flex;
justify-content: center;
}
.ani-button {
padding: 15px;
background-color: cadetblue;
color: white;
border: none;
border-radius: 50px;
}
.ani-button:hover {
animation-name: 요리조리;
animation-duration: 0.6s;
}
<!-- animation 2 -->
<div class="container">
<i class="fas fa-plus fa-2x ani-2"></i>
</div>
크기를 확대하고 싶을 땐: transform: scale(2.0);
@keyframes 회전확대 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
100% {
transform: rotate(45deg) scale(2.0);
}
/* 100% {
transform: rotate(30deg);
transform: scale(2.0);
} */
}
.ani-2 {
margin-top: 30px;
}
.ani-2:hover {
animation-name: 회전확대;
animation-duration: 1s;
animation-fill-mode: forwards;
}
Hello! Melbet Brasil is a real find for gamblers in Brazil. They offer betting on over 30 sports, including soccer, basketball and even eSports. I especially appreciate the speed of payouts and compatibility with Brazilian payment systems. Thanks to this site, I can place bets and receive winnings easily and safely. I highly recommend it.
I work with a non-profit in Poland, focusing on organizing community clean-up days in local parks and riversides. These events are crucial for raising environmental awareness and rely heavily on good weather to ensure a strong turnout. By consulting https://icmmeteo.pl , we've been able to pick optimal days for our activities, significantly increasing community participation and making our clean-up efforts more effective. This forecasting tool has become vital in our event planning process.