간단한 CSSanimation 정보
CSSanimate를 만드는 방법
CSSanimate란?
CSSanimate는 jQuery나 JS 라이브러리를 사용하지 않고 웹사이트에 동적인 움직임을 더하는 CSS3의 기술이다
@keyframes 정보
CSSanimate에는 @keyframes
sample.css@keyframes free_name{
/* 適当な名前でもOK、
日本語も使えるけどあまり使わない方がいい */
0%{
/* アニメーションのはじめ */
}
100%{
/* アニメーションの終わり */
}
}
free_name 부분은 어떤 이름이든 괜찮습니다.
0%가 애니메이션의 시작
100%가 애니메이션의 끝이라고 기억하자.
이것을 실제로 움직이려면 animationcss:sample.css
.box{
animation:free_name 5s ease -2s infinite alternate;
}
오른쪽에서
@keyframes free_name{
/* 適当な名前でもOK、
日本語も使えるけどあまり使わない方がいい */
0%{
/* アニメーションのはじめ */
}
100%{
/* アニメーションの終わり */
}
}
.box{
animation:free_name 5s ease -2s infinite alternate;
}
@keyframes 옆에 쓰여진 animation-name 값, animation-duration 값, animation-timing-function 값, animation-delay의 값, animation-iteration-count 값, animation-direction 값 공백으로 구분하여 지정
시도해 보자.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
</div>
</body>
</html>
style.css
.box{
background-color: red;
animation:anime 1s ease-in-out 0s infinite alternate;
height: 50px;
}
@keyframes anime{
0%{width:10px}
100%{width:200px}
}
그러면 이런 식으로 움직입니다.
Undertale과 같은 RPG와 같은 체력 게이지와 같은 애니메이션을 만들 수 있습니다.
@keyframes anime 의 부분에 애니메이션을 지정. 처음에는 옆의 길이가 10px 하지만, 마지막은 200px 가 되는 애니메이션을 1s 걸어 재생한다.ease-in-out 에서 차처럼 가속하고 감속하도록 하고 있다. 이 부분을 ease-out 로 하면 점점 고속으로, ease-in 로 하면 점점 감속해 간다.infinite 에서 무한대로 재생하여 alternate 로 왔다갔다오거나 한다.이런 느낌 쉽게 할 수 있고 어레인지를 추가할 수도 있다.
Reference
이 문제에 관하여(간단한 CSSanimation 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/usaginoniku/items/7faee200a231f98abfa5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
