CSS 3 과도 한 애니메이션 과 느 린 효과 사례 설명 사용
네 개의 작은 속성
속성
의의
transition-property
어떤 속성 을 과도 해 야 합 니까?
transition-duration
애니메이션 시간
transition-timing-function
애니메이션 변화 곡선(완화 효과)
transition-delay
지연 시간
호환성 IE 10 호 환 시작,이동 단 호 환 양호4.567917.얼마 전에 웹 페이지 의 애니메이션 효 과 는 대체적으로 자바 스 크 립 트 타이머 에 의 해 이 루어 졌 는데 지금 은 CSS 3 를 과도 하 게 사용 하 는 것 으로 바 뀌 었 다장점:애니메이션 이 더욱 섬세 하고 메모리 비용 이 적다4.567917.transition 속성 은 4 가지 요소 가 있다.
transition：width 1s linear 0s;（어떤 속성 이 과도 하고 애니메이션 시간 이 길 며 변화 속도 곡선,지연 시간)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>어떤 속성 이 과도 에 참여 할 수 있 습 니까?
transition：all 5s linear 0s;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
transition: all 5s linear 0s;
}
.box1:hover {
width: 400px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>완 동 매개 변수
4.567917.transition 의 세 번 째 매개 변 수 는 바로 느 린 매개 변수,즉 변화 속도 곡선 이다.
transition：width 1s linear 0s; 상용 완 동 매개 변수
하위 속성
transition-timing-function：ease；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
border:1px solid black;
}
.box1 p{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0;
margin-bottom: 10px;
transition: left 5s linear 0s;
}
.box1 p:nth-child(2) {
transition-timing-function: ease;
}
.box1 p:nth-child(3) {
transition-timing-function: ease-in;
}
.box1 p:nth-child(4) {
transition-timing-function: ease-out;
}
.box1 p:nth-child(5) {
transition-timing-function: ease-in-out;
}
.box1:hover p {
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
사이트https://cubic-bezier.com/베 어 셀 곡선 을 생 성 할 수 있 습 니 다.애니메이션 느 린 매개 변 수 를 사용자 정의 할 수 있 습 니 다
CSS 3 의 과도 한 애니메이션 사용 과 느 린 효과 사례 에 대한 설명 은 여기까지 입 니 다.더 많은 관련 CSS 3 의 과도 한 애니메이션 사용 과 느 린 효과 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 십시오.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
