css3 애니메이션의transition과animation
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#transition-demo {
height: 100px;
background-color: yellowgreen;
transition: height 1s 0.5s ease-out;
}
#transition-demo:hover {
height: 200px;
}
#animation-demo {
height: 200px;
animation: 3s type forwards alternate infinite;
animation-play-state: running;
}
#animation-demo:hover {
animation-play-state: paused;
}
@keyframes type {
from {background: yellowgreen}
50% {background: yellow}
to {background: aquamarine}
}
style>
head>
<body>
<h1>css3 h1>
<pre> ：<a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" target="_blank"> a>pre>
<p> transition animation p>
<div id="transition-demo">
transition
div>
<h3>transition h3>
<div>
<p>transition-property: height; // p>
<p>transition-duration: 1s;p>
<p>transition-delay: 1s;p>
<p>transition-time-function: ease/linear/ease-in( )/ease-out/cubic-bezier( );p>
div>
<h3>transition h3>
<div>
<p>0. ， block,none p>
<p>1. transition ， p>
<p>2. ， ， p>
<p>3. ： p>
<p>4. transition p>
div>
<div id="animation-demo">
animation ，
div>
<h3>animation h3>
<div>
<p>animation-name: rainbow;p>
<p>animation-duration: 1s;p>
<p>animation-timing-function: ease-in-out;p>
<p>animation-delay: 1s;p>
<strong>animation-fill-mode( ): none( )/forwards( )/backwards( )/both;strong>
<p><strong>animation-direction( ): normal( )/alternate( )/reverse( )/alternate-reverse( );strong>p>
<p>animation-iteration-count( ): 3/<strong>infinite( )strong>;p>
<p>steps(10) p>
<p>animation-play-state( <strong> strong>):running( )/paused( )；
<strong> strong>
p>
div>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LintCode - 순차적으로 숫자를 인쇄합니다.1에서 최대 N까지의 정수를 반복하는 방법으로 찾습니다. 예제 제시N = 1, 반환[1,2,3,4,5,6,7,8,9]. 제시N = 2, 반환[1,2,3,4,5,6,7,8,9,10,11,...,99]. 주의 다음과 같...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
