CSS에서는 전환 타이밍 기능 속성을 사용하여 애니메이션을 일정한 속도로 설정할 수 있습니다. 요소에 "transition-timing-function:linear;" 스타일만 추가하면 됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
ease:
1, easy: (점진적으로 느려짐) 기본값
2, 선형: (일정한 속도)
3, easy-in: (가속)
4,easy-out: (느리게)
5. easy-in-out: (가속했다가 감속)
6.cubic-bezier
예:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding: 0;}
.icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
.icon_down:hover{ transform: rotate(180deg);}
</style></head><body>
<p class="icon_down"></p></body></html>렌더링: 마우스가 180도 회전합니다.
예 2 :
마우스 포인터를 p 요소에 놓으면 너비가 100px에서 300px로 점차 변경됩니다.
p
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}렌더링:
마우스가 지나간 후
추천 학습: css 비디오 튜토리얼
위 내용은 CSS 애니메이션을 일정한 속도로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
