[B! transition] metalsdinobotのブックマーク

CSS3のtransition-timing-functionの値、cubic-bezier()に関して | KnockKnock

metalsdinobot 2013/12/17

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #9.1 CSS3アニメーション（Animation） | DevelopersIO

animation-nameは、実際にどのような動きをするかを定義した@keyframesを指定し、唯一の必須項目です。記述例) animation /* * @animation-name * @animation-duration * @animation-timing-function * @animation-delay * @animation-iteration-count * @animation-direction * @animation-fill-mode */ animation: myAnimarion 1s ease 0s 1 normal none; animation-name以外のプロパティは全てオプション扱いとなり、省略した場合は記述例にある値が初期値として指定されます。 @keyframes @keyframesは、要素に対してどのようなアニメーション

metalsdinobot 2012/11/15

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;