CSS:Animation
CSS의 애니메이션 사용 방법 및 예제와 팁 모음
Libraries
- AnimXYZ - https://animxyz.com/
- Animate.css - https://animate.style/
- Animista
- Animation Library
- Magic CSS
- lightGallery
- Loading.io
- Skeleton Elements
- Micron
- AOS
- Vivify - https://github.com/Martz90/vivify
- Motus - https://github.com/alexcambose/motus
대각선 방향 색상 그라데이션 (Diagonal Color Gradients)
html, body {
width: 100%;
height:100%;
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
모던 스타일 그라디언트 Hover Animation 버튼
https://turbo.build/repo 사이트의 버튼 Hover 시 배경에 무지개색 느낌의 모던 스타일 CSS 버튼:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #000;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
움직이는 텍스트 애니메이션
.animated-title {
font-size: 60px;
font-family: 'Raleway', Sans-serif;
font-weight: 300;
position: relative;
width: 100%;
max-width: 100%;
height: auto;
padding: 100px 0;
overflow-x: hidden;
overflow-y: hidden;
}
.animated-title .track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 60s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (hover: hover) and (min-width: 700px) {
.animated-title .content {
-webkit-transform: translateY(calc(100% - 8rem));
transform: translateY(calc(100% - 8rem));
}
}
Wave animation examples
물결이 울렁이는 느낌의 애니메이션
SVG 파일이 필요하다.
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
Example 02
SVG파일이 필요 없다.
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="wave"><defs></defs><path id="feel-the-wave" d=""/></svg>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="wave"><defs></defs><path id="feel-the-wave-two" d=""/></svg>
<div class="btn-wrapper">
<a href="" class="btn" data-pause>Pause</a>
<a href="" class="btn" data-play>Play</a>
<a href="" class="btn" data-color>Random color</a>
</div>
var wave1 = $('#feel-the-wave').wavify({
height: 80,
bones: 4,
amplitude: 60,
color: '#B289EF',
speed: .15
});
var wave2 = $('#feel-the-wave-two').wavify({
height: 60,
bones: 3,
amplitude: 40,
color: 'rgba(150, 97, 255, .8)',
speed: .25
});
var colors = ['rgba(255, 281, 75, .8)', '#dc75ff', '#9d9ade', '#6cd7ee', '#aceeae']
$("[data-pause]").on('click', function(){
wave1.pause();
wave2.pause();
return false;
});
$("[data-play]").on('click', function(){
wave1.play();
wave2.play();
return false;
});
$("[data-color]").on('click', function(){
wave1.updateColor({
color: colors[Math.floor(Math.random()*colors.length)],
timing: 5
});
wave2.updateColor({
color: colors[Math.floor(Math.random()*colors.length)],
timing: 3
});
return false;
});
html, body {
height: 100%;
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.btn-wrapper {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.btn {
display: inline-block;
background-color: white;
color: darkslategrey;
font-size: 14px;
border-radius: 3px;
padding: 4px 10px;
margin-right: 10px;
text-decoration: none;
}
.wave {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index: 1;
}
.wave + .wave {
z-index: 2;
}
See also
Favorite site
- 8 Best Free Libraries For SVG
- HTML5 SVG Fill Animation With CSS3 And Vanilla JavaScript
- Figma: 5 ways to add animation to your designs
- CSS Animation Libraries
Button animations
- Button Animation CSS: 65 Beautiful CSS Buttons - DEV Community
- The 55 Best CSS Button Hover Effects You Can Use Too
- 60+ Cool CSS Button Style & Animation Examples - UI Fresh
Progress animation
Backgrounds
- 40 CSS Animated Background Examples - 좋은 예제 많지만 그 중 "Blurred animated gradients" 가 가장 좋은듯?
- [추천] The Best Looking CSS Animated Background Examples - 많은 애니메이션 예제가 있다. (로딩 시간 오래 걸림)
- Advanced effects with CSS background blend modes - LogRocket Blog - 성능적으로 좋아보이진 않는다.