【CSS】アニメーションで繰り返しごとに間隔を空ける方法
やりたいこと CSSではanimationプロパティを使ってアニメーションを付けることができます。 ではこのように「繰り返しの度に1秒待ってから動き出すようにしたい」場合はどうすればいいでしょう。 animation-delayプロパティでは繰り返せない .circle { animation: circle-move 2s infinite; animation: circle-move 2s 1s infinite; } animation-delayを指定すると、その時間分アニメーションの開始を遅らせることができます。 しかしその値を1sにしても待ってくれるのは初回限りで、それ以降のループでは待たずにビュンビュン動いてしまいます。 というのもanimation-delayはあくまで初回の開始を遅らせるだけで、それ以降は遅延が発生しません。この解決法が本記事の主題です。 解決法 まず結
CSS3 Animations
Internet Explorer および Opera は、まだ @keyframes ルールおよび animation プロパティをサポートしていません。 Firefox は、接頭辞 -moz- を必要とし、Chrome と Safari は、接頭辞 -webkit- を必要とします。 @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background: red;} to {background:
CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creative CSS3 Animation Menus
