animation(CSS)
animation - CSS: Cascading Style Sheets | MDN
完整解析 CSS 動畫 ( CSS Animation ) - OXXO.STUDIO
CSSアニメーション 入門 - Qiita
CSSアニメーションを使いこなすために知っておきたい5つのこと - Qiita
CSS アニメーションについて深く知る - Qiita
Scroll-driven Animations
CSS scroll-driven animations - CSS: Cascading Style Sheets | MDN
SVG SMIL animation
APNG
animation
animation: 動畫名稱 播放時長 開始時間點 速度曲線 次數 順序 開始前結束後狀態 播放狀態
animation-name
動畫名稱
required
animation-duration
動畫完整播放所需時間
required
預設值為0
必須大於等於0，負值無效
可使用整數或小數點
單位為秒（s）或毫秒（ms）
人類資訊處理模型
animation-delay
動畫開始的時間點
預設值為0
可設為負值
負值意味動畫立即開始，並且提早結束
animation-timing-function
animation-timing-function - CSS: Cascading Style Sheets | MDN
由貝茲曲線（Cubic Bezier）構成的動畫速度曲線函數圖型
預設值為ease
起始結束減速，中途加速
有數個預先定義好的值
linear
線性
ease
起始結束減速，中途加速
ease-in
漸入
ease-out
漸出
ease-in-out
漸入漸出
steps
steps(n, <jumpterm>)
動畫會在過程中的n個點上停止
每次停留的時間長度相等
jumpterm則決定停留發生的時間點
預設為jump-end
亦可自行定義貝茲曲線的數值
cubic-bezier(n1, n2, n3, n4)
值需為介於0至1之間的小數或整數
Easing Functions Cheat Sheet
cubic-bezier.com
CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info
【CSSアニメーション】transitionのイージングにease-inやease-outを適当に設定するのはやめましょう #CSS - Qiita
animation-iteration-count
動畫播放次數
預設值為1
可設為n（正整數）或infinite
animation-direction
動畫播放順序
預設值為normal
正向播放
reverse
alternate
奇數次正向播放，偶數次反向播放
alternate-reverse
animation-fill-mode
動畫播放開始前或結束後的狀態
預設值為none
動畫結束後，立即回至開始前的狀態
forwards
動畫結束後保持結束時的狀態
backwards
both
animation-play-state
動畫播放狀態
預設值為running
播放
paused
running
interpolate-size、calc-size
2024-10-31 ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります | コリス
CSS屬性