ãããŒãCSSã§ããããåãããŠãŸããïŒ
ãããããããšæãã€ã€ãªããªãæãåºãªããªããŠäºããããŸãããCSS Animationã«ã€ããŠãããªäººã®ããã®ç°¡åãªå°å ¥ã§ãã
CSSã§ã®ã¢ãã¡ãŒã·ã§ã³ã¯äºçš®é¡
å®ã¯CSSã®ã¢ãã¡ãŒã·ã§ã³ããšèšã£ãŠãäºçš®é¡ãããŸãã
transition
⊠ããŠã¹ãããŒãšãã®æäœæã«åããã€animation
⊠ãã£ãšåãç¶ãããã€- ããããã£ã¯å²ãšäŒŒãŠã
- ä»ã®ãšãããã©ã¡ãããã³ããŒãã¬ãã£ã¯ã¹ãå¿ èŠ
é »ç¹ã«äœ¿ãããã®ã¯åè ã§ããããã
transition
ã§ããã£ãšã¢ãã¡ãŒã·ã§ã³
ãªã³ã¯ã«ã«ãŒãœã«ãèŒãããšæåè²ãå€ããããšããäŸã
:link { color: #00f; transition: color .5s; } :link:hover { color: #f00; }
transition
ããããã£ã§èšå®ããŸãã- å€ã¯ãå€åããããããããã£ã®ååããšãå€åã«ãããæéãã§ãã
- æéã®åäœã¯
s
ã§ãsecondsã€ãŸãç§ã§ãã - ïŒã¡ãªã¿ã«CSSã¯
0.1
ã.1
ãšèšè¿°ããäºãåºæ¥ãŸããïŒ
- æéã®åäœã¯
- è€æ°èšå®ããå Žåã¯ã«ã³ã
,
ã§åºåããŸãã - ä»ã«å€åã®ããæ¹ãšãå€ååã®åŸ ã¡æéãèšå®ããäºãåºæ¥ãŸãã
animation
ã§ãã€ã£ãšã¢ãã¡ãŒã·ã§ã³
.selector { animation: blink 1s infinite; } @keyframes blink { 0% { opacity:1 } 100% { opacity:0 } }
animation
ãš@keyframes
ã®äºçš®é¡ãå¿ èŠã§ããanimation
ããå©çšããkeyframesã®ååãæå®ããŸãã@keyframes
ã§ã¢ãã¡ãŒã·ã§ã³ã®å 容ãæå®ããŸããanimation
ã§æå®ããã®ã¯å šäœã®æéã§ãã@keyframes
ã§æå®ããã®ã¯æéã®ãã¡ã®é²è¡å²åã§ãã- åçæéã¯
animation
ã§æå®ããŸãã - äœãæå®ããªããã°ãã¢ãã¡ãŒã·ã§ã³ã¯0â100%ãŸã§ãã£ãŠçµãããŸãã
infinite
ãæå®ãããšãäœåºŠãç¹°ãè¿ããŸããalternate
ãæå®ãããšãè¡ã£ãŠæ»ã£ãŠãåºæ¥ãŸãã
ãã£ãšãããã
MDNããããã
ãããŸã
å®ã¯åŸæ¥ã®èšäºãžã®åžç³ã§ãã