❏ css - 여러가지 keyframes 모음집!

오늘은 저번시간에 이어 제가 공부하면서 만들어본 keyframes들을 가지고 왔습니다!

 

만약 공부하면서 또 추가되면 이 글에 계속해서 추가해봐야겠네요!

 

---

 

1. updown

 

 

✎ html

<div class="p1">SCROLL DOWN</div>
<div class="scroll"><i class="fa-sharp fa-solid fa-chevron-down fa-lg"></i></div>

 

✎ css

.scroll i{
    animation: updown 1s ease-in-out infinite;
    cursor: pointer;
    position: absolute;
}

@keyframes updown{
    0%{
        bottom:1rem;
    } 
    50%{
        bottom:1.5rem;
    }
    100%{
        bottom:1rem;
    }
}

 

 

 

2. blink

 

 

✎ html

<h4>Welcome</h4>
<h2>We Are<span> TAESAN Products Inc.</span></h2>
<p>RESOURCE CENTER</p>

 

✎ css

h2 span::after{
    content:"";
    height: 40px;
    width: 3px;
    background-color: #fff;
    display: inline-block;
    animation: blink .7s ease-in-out infinite;
}

@keyframes blink{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

 

 

3. upAnddown

 

 

✎ html

<div><i class="fa-solid fa-cloud"></i></div>

 

✎ css

div{
    width: 100px;
    height: 100px;
    animation-name: upAnddown;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes upAnddown{
	0% {transform: translateY(0%);}
	50% {transform: translateY(-20%);}
	100% {transform: translateY(0%);}
}