CSS animation에서 뛰어넘기다 - heartbeat -
CSS animation을 만들고 싶습니다.
의료 현장의 과제를 해결하기 위해,
예술과 디자인과 IT의 힘이 필요합니다.
매일 1 작품을 목표로,
CSS animation을 발신합니다.
그럼 온다!
1. heartbeat
조속하지만 완성판은 이쪽
왜 할까?
판막증의 치료방법과 수술적응을 바로 판단할 수 있는 React SPA를 개발 중입니다만, microinteraction을 도입하여 UX를 향상시키고 싶기 때문입니다.
이 심박동을 버튼에 도입하고 onClick에서 설정하고 Google Material design의 Fab 버튼과 같이 오른쪽 하단에 놓고 페이지 전환하고 싶을 때 사용할 수 있습니다.
어떻게 할까?
참고로 한 것은
여기 입니다.
그럼, 가자!
움직임을 분해한다
· 스케일이 다른 것을 3 개 만들고, 그들을 애니메이션으로 연결하면 좋을 것 같습니다.
・운동의 특징으로서는, 최초와 마지막을 천천히 여운을 붙여, 중간은 빨리 재빠르게 크기를 바꾸면 좋을 것 같습니다!
→ ease - in -out !
또한, 여유는
· linear (일정)
· ease-in (천천히 시작)
・ ease-out (느리게 끝난다)
· ease-in-out (천천히 시작하고 천천히 끝난다)
에 대량으로 나누어집니다.
cubic-bezier(베지어 곡선)에 의해, 세세하게 스스로 설정할 수도 있습니다.
사용해 보려면 여기을 참조하십시오.
코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="heartbeat"></div>
</body>
</html>
styles.css
.heartbeat{
width: 100px;
height: 100px;
background: #000;
margin: 30px auto;
border-radius: 50%;
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat{
from{
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10%{
transform: scale(0.91);
animation-timing-function: ease-in;
}
17%{
transform: scale(0.98);
animation-timing-function: ease-out;
}
33%{
transform: scale(0.87);
animation-timing-function: ease-in;
}
45%{
transform: scale(1);
animation-timing-function: ease-out;
}
}
보충 설명
· CSS animation의 일괄 지정 속성
이전부터 순서대로 다음과 같이 설정할 수 있습니다.
· animation-name : 지정된 값
· animation-duration : 지정된 값
· animation-timing-function : 지정된 값
· animation-delay : 지정된 값
· animation-direction : 지정된 값
· animation-iteration-count : 지정된 값
· animation-fill-mode : 지정된 값
· animation-play-state : 지정된 값
참고: MDN animation
transform-origin 프로퍼티는 변형할 때의 원점을 지정할 때 사용합니다.
이 경우 원의 중앙에서 변형하고 싶기 때문에 center가 되어 2개의 값을 설정하는 것으로, 1번째: 수평 방향, 2번째: 수직 방향으로 설정할 수 있습니다.
transform-origin: right bottom으로 설정하면 다음과 같은 동영상이 됩니다.
변형의 중심이 오른쪽 하단으로 어긋나고 있네요.
이번에는 이상입니다.
keyframe 으로 이렇게 세세하게 설정하면, 이러한 심박동도 간단하게 재현할 수 있네요.
그럼~
Reference
이 문제에 관하여(CSS animation에서 뛰어넘기다 - heartbeat -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/290aa4ca80b68c8effe3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="heartbeat"></div>
</body>
</html>
.heartbeat{
width: 100px;
height: 100px;
background: #000;
margin: 30px auto;
border-radius: 50%;
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat{
from{
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10%{
transform: scale(0.91);
animation-timing-function: ease-in;
}
17%{
transform: scale(0.98);
animation-timing-function: ease-out;
}
33%{
transform: scale(0.87);
animation-timing-function: ease-in;
}
45%{
transform: scale(1);
animation-timing-function: ease-out;
}
}
Reference
이 문제에 관하여(CSS animation에서 뛰어넘기다 - heartbeat -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/290aa4ca80b68c8effe3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
