Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. animation

animation

『animation』プロパティは要素をアニメーションさせることができます。『transition』プロパティはCSSの擬似クラスやJavaScriptによるデザインの変化等をきっかけとする動作となりますが、『animation』プロパティを使用するとそういったデザイン変化をきっかけとすることなく自動的にアニメーションさせることができます。

『animation』プロパティを指定するときは、アニメーションの時間などの設定とは別に『@keyframes』でアニメーション本体の動作を構築する必要があります。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード
  1. div {
  2. 	animation: hogeanime1 3s;
  3. 	-webkit-animation: hogeanime1 3s;
  4. 	-moz-animation: hogeanime1 3s;
  5. 	-ms-animation: hogeanime1 3s;
  6. }
  7.  
  8. @keyframes hogeanime1 {
  9. 	0% { width: 200px;}
  10. 	100% { width: 400px;}
  11. }
  12. @-webkit-keyframes hogeanime1 {
  13. 	0% { width: 200px;}
  14. 	100% { width: 400px;}
  15. }
  16. @-moz-keyframes hogeanime1 {
  17. 	0% { width: 200px;}
  18. 	100% { width: 400px;}
  19. }
  20. @-ms-keyframes hogeanime1 {
  21. 	0% { width: 200px;}
  22. 	100% { width: 400px;}
  23. }
指定可能プロパティ一覧
プロパティ一覧初期値概要
animation-namenoneアニメーション名を指定します。
animation-duration0sアニメーション一回分の時間を指定します。
animation-timing-functioneaseアニメーション変化のタイミングや進行割合を指定します。
animation-delay0sアニメーション開始の待ち時間を指定します。
animation-iteration-count1アニメーションの繰り返し回数を指定します。
animation-directionnormalアニメーションを交互に反転再生させるかどうかを指定します。
animation-fill-modenoneアニメーションの再生前、再生後の状態を指定します。

上記のプロパティは半角スペースで区切る事により『animation』でまとめて指定することができます。指定の順番は

  1. 『アニメーション名』(animation-name)
  2. 『アニメーション一回分の時間』(animation-duration)
  3. 『アニメーションのタイミングや進行割合』(animation-timing-function)
  4. 『アニメーション開始の待ち時間』(animation-delay)
  5. 『アニメーションの繰り返し回数』(animation-iteration-count)
  6. 『アニメーションを交互に反転再生させるかどうか』(animation-direction)
  7. 『アニメーションの開始前と終了後の状態』(animation-fill-mode)

になります。省略した時は初期値が指定されているものとして反映されます。

まとめて指定する場合の順番に関する公式の資料が見つからなかった為、各値を省略せず上記の順番でしっかりと記述したほうが無難かもしれません。

  1. div {
  2. 	animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
  3. 	-webkit-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
  4. 	-moz-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
  5. 	-ms-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
  6. }
ブラウザでの表示結果
  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite;
  5. 	-webkit-animation: hogeanime1 3s infinite;
  6. 	-moz-animation: hogeanime1 3s infinite;
  7. 	-ms-animation: hogeanime1 3s infinite;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

アニメーションさせることができます。『animation』プロパティを使用する際は『animation』の記述とは別に『@keyframes』も指定しなくてはなりませんのでご注意下さい。

『@keyframes』の記述方法は『@keyframes』という記述の後に任意の『アニメーション名』書き、その後に『{}』で囲い、その中で進行状態に合わせたプロパティの変化を『0%』から『100%』の間で記述します。進行状態は『0%』が開始時、『100%』が終了時です。『0%』は『from』、『100％』は『to』という単語で記述することもできますが、『%』で指定するのが一般的です。

  1. /* 以下のように『{}』で囲い、その中で変化のタイミングと状態を指定します。 */
  2. @keyframes hogeanime1 {
  3. 	0% { width: 200px;}
  4. 	50% { width: 300px;}
  5. 	100% { width: 400px;}
  6. }
  7. @-webkit-keyframes hogeanime1 {
  8. 	0% { width: 200px;}
  9. 	50% { width: 300px;}
  10. 	100% { width: 400px;}
  11. }
  12. @-moz-keyframes hogeanime1 {
  13. 	0% { width: 200px;}
  14. 	50% { width: 300px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-ms-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	50% { width: 300px;}
  20. 	100% { width: 400px;}
  21. }

以下がサンプルです。

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite;
  5. 	-webkit-animation: hogeanime1 3s infinite;
  6. 	-moz-animation: hogeanime1 3s infinite;
  7. 	-ms-animation: hogeanime1 3s infinite;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px; background: #f00;}
  11. 	70% { background: #ff0;}
  12. 	80% { background: #ff0;}
  13. 	100% { width: 400px; background: #ff0;}
  14. }
  15. @-webkit-keyframes hogeanime1 {
  16. 	0% { width: 200px; background: #f00;}
  17. 	70% { background: #ff0;}
  18. 	80% { background: #ff0;}
  19. 	100% { width: 400px; background: #ff0;}
  20. }
  21. @-moz-keyframes hogeanime1 {
  22. 	0% { width: 200px; background: #f00;}
  23. 	70% { background: #ff0;}
  24. 	80% { background: #ff0;}
  25. 	100% { width: 400px; background: #ff0;}
  26. }
  27. @-ms-keyframes hogeanime1 {
  28. 	0% { width: 200px; background: #f00;}
  29. 	70% { background: #ff0;}
  30. 	80% { background: #ff0;}
  31. 	100% { width: 400px; background: #ff0;}
  32. }

アニメーションの繰り返し回数は指定した回数アニメーションを繰り返してくれます。指定できる値は『数値』と『infinite』になります。『数値』の場合は指定した回数繰り返し、『infinite』の場合は無限に繰り返します。

『animation-iteration-count』プロパティの値一覧
値効果
数値アニメーションを繰り返す回数を指定します。（初期値は1）
infiniteアニメーションを無限に繰り返します。
  1. div.hoge1 {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s 3;
  5. 	-webkit-animation: hogeanime1 3s 3;
  6. 	-moz-animation: hogeanime1 3s 3;
  7. 	-ms-animation: hogeanime1 3s 3;
  8. }
  9.  
  10. div.hoge2 {
  11. 	background: #f00;
  12. 	width: 200px;
  13. 	animation: hogeanime1 3s infinite;
  14. 	-webkit-animation: hogeanime1 3s infinite;
  15. 	-moz-animation: hogeanime1 3s infinite;
  16. 	-ms-animation: hogeanime1 3s infinite;
  17. }
  18.  
  19. @keyframes hogeanime1 {
  20. 	0% { width: 200px;}
  21. 	100% { width: 400px;}
  22. }
  23. @-webkit-keyframes hogeanime1 {
  24. 	0% { width: 200px;}
  25. 	100% { width: 400px;}
  26. }
  27. @-moz-keyframes hogeanime1 {
  28. 	0% { width: 200px;}
  29. 	100% { width: 400px;}
  30. }
  31. @-ms-keyframes hogeanime1 {
  32. 	0% { width: 200px;}
  33. 	100% { width: 400px;}
  34. }

アニメーションの反転再生等を設定する『animation-direction』の値を指定することでアニメーションを逆方向（100%から0%）などの動作に変更することができます。『animation-direction』の値を指定していない場合は『@keyframe』で設定した『0%』から『100%』のアニメーションを繰り返す動作になります。

『animation-direction』プロパティの値一覧
値効果
normal通常の方向(0%から100%)にアニメーションします。これが初期値です。
alternate奇数の回数では通常の方向(0%から100%)にアニメーションし、
偶数の回数では逆の方向(100%から0%)にアニメーションします。
reverse逆の方向(100%から0%)にアニメーションします。
alternate-reverse偶数の回数では通常の方向(0%から100%)にアニメーションし、
奇数の回数では逆の方向(100%から0%)にアニメーションします。
  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite normal;
  5. 	-webkit-animation: hogeanime1 3s infinite normal;
  6. 	-moz-animation: hogeanime1 3s infinite normal;
  7. 	-ms-animation: hogeanime1 3s infinite normal;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s infinite alternate;
  6. 	-moz-animation: hogeanime1 3s infinite alternate;
  7. 	-ms-animation: hogeanime1 3s infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite reverse;
  5. 	-webkit-animation: hogeanime1 3s infinite reverse;
  6. 	-moz-animation: hogeanime1 3s infinite reverse;
  7. 	-ms-animation: hogeanime1 3s infinite reverse;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s infinite alternate-reverse;
  5. 	-webkit-animation: hogeanime1 3s infinite alternate-reverse;
  6. 	-moz-animation: hogeanime1 3s infinite alternate-reverse;
  7. 	-ms-animation: hogeanime1 3s infinite alternate-reverse;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

『animation-delay』プロパティはアニメーション開始の待ち時間を指定することができます。

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s 2s infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s 2s infinite alternate;
  6. 	-moz-animation: hogeanime1 3s 2s infinite alternate;
  7. 	-ms-animation: hogeanime1 3s 2s infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

『animation-timing-function』プロパティの値を指定するとアニメーション変化のタイミングや変化割合等を変更することができます。

『animation-timing-function』プロパティの値一覧
値効果
ease開始付近と終了付近の動きを滑らかにします。『animation-timing-function』の指定を省略した場合はこの『ease』が指定されているものとして扱われます。
linear一定の速度で変化します。
ease-in開始付近の動きを緩やかにします。
ease-out終了付近の動きを緩やかにします。
ease-in-out開始付近と終了付近の動きを緩やかにします。
  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s ease infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s ease infinite alternate;
  6. 	-moz-animation: hogeanime1 3s ease infinite alternate;
  7. 	-ms-animation: hogeanime1 3s ease infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s linear infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s linear infinite alternate;
  6. 	-moz-animation: hogeanime1 3s linear infinite alternate;
  7. 	-ms-animation: hogeanime1 3s linear infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s ease-in infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s ease-in infinite alternate;
  6. 	-moz-animation: hogeanime1 3s ease-in infinite alternate;
  7. 	-ms-animation: hogeanime1 3s ease-in infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s ease-out infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s ease-out infinite alternate;
  6. 	-moz-animation: hogeanime1 3s ease-out infinite alternate;
  7. 	-ms-animation: hogeanime1 3s ease-out infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s ease-in-out infinite alternate;
  5. 	-webkit-animation: hogeanime1 3s ease-in-out infinite alternate;
  6. 	-moz-animation: hogeanime1 3s ease-in-out infinite alternate;
  7. 	-ms-animation: hogeanime1 3s ease-in-out infinite alternate;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

『animation-fill-mode』プロパティを使用するとアニメーションの開始前と終了後をどのような状態にするのか指定することができます。アニメーション開始前とは『animation-delay』でアニメーション開始が待たされている間の事を指しますのでご注意下さい。

『animation-fill-mode』プロパティの値一覧
値効果
noneアニメーションで指定されたスタイルをアニメーションの開始前と終了後に適用しません。これが初期値です。
forwardsアニメーション終了の状態がそのまま維持されます。通常だと『100%』、または『to』で指定しているスタイルになります。
※『animation-direction』で逆再生している場合は『0%』、または『from』で指定しているスタイルになります。
backwardsアニメーション再生前の状態がアニメーションで指定した最初の値になります。通常だと『0%』、または『from』で指定しているスタイルになります。
※『animation-direction』で逆再生している場合は『100%』、または『to』で指定しているスタイルになります。
both『forwards』と『backwards』を両方指定した状態になります。

以下がサンプルです。『animation-fill-mode』のサンプルは、アニメーション回数を3回と指定しているので、動作確認をする場合はブラウザを更新して下さい。

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s 3 none;
  5. 	-webkit-animation: hogeanime1 3s 3 none;
  6. 	-moz-animation: hogeanime1 3s 3 none;
  7. 	-ms-animation: hogeanime1 3s 3 none;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 200px;
  4. 	animation: hogeanime1 3s 3 forwards;
  5. 	-webkit-animation: hogeanime1 3s 3 forwards;
  6. 	-moz-animation: hogeanime1 3s 3 forwards;
  7. 	-ms-animation: hogeanime1 3s 3 forwards;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 300px;
  4. 	animation: hogeanime1 3s 2s 3 backwards;
  5. 	-webkit-animation: hogeanime1 3s 2s 3 backwards;
  6. 	-moz-animation: hogeanime1 3s 2s 3 backwards;
  7. 	-ms-animation: hogeanime1 3s 2s 3 backwards;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

  1. div {
  2. 	background: #f00;
  3. 	width: 300px;
  4. 	animation: hogeanime1 3s 2s 3 both;
  5. 	-webkit-animation: hogeanime1 3s 2s 3 both;
  6. 	-moz-animation: hogeanime1 3s 2s 3 both;
  7. 	-ms-animation: hogeanime1 3s 2s 3 both;
  8. }
  9. @keyframes hogeanime1 {
  10. 	0% { width: 200px;}
  11. 	100% { width: 400px;}
  12. }
  13. @-webkit-keyframes hogeanime1 {
  14. 	0% { width: 200px;}
  15. 	100% { width: 400px;}
  16. }
  17. @-moz-keyframes hogeanime1 {
  18. 	0% { width: 200px;}
  19. 	100% { width: 400px;}
  20. }
  21. @-ms-keyframes hogeanime1 {
  22. 	0% { width: 200px;}
  23. 	100% { width: 400px;}
  24. }

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

お問い合わせ | WebProgrammingPortal

お名前
メールアドレス
メールアドレス(再入力)
内容
※決済に関するお問い合わせの場合は本名とおおまかな決済日時と決済時に使用したメールアドレスのご入力をお願い致します。

以下の内容で送信しますがよろしいですか？

ログイン | WebProgrammingPortal

メールアドレス
パスワード

パスワードを忘れてしまった方はへ

使用アカウントの選択 | WebProgrammingPortal

仮アカウント作成 | WebProgrammingPortal

メールアドレス
メールアドレス(再入力)

以下の内容で送信しますがよろしいですか？

個人またはグループアカウント作成 | WebProgrammingPortal

該当データが見つかりません。大変お手数ですがURLや入力データを確認後、再度アクセスして下さい。

以下の内容で送信します。よろしいですか？

登録メールアドレスの変更 | WebProgrammingPortal

現在のメールアドレス

変更メールアドレス
変更メールアドレス(再入力)
パスワード

以下の内容で送信しますがよろしいですか？

パスワード変更 | WebProgrammingPortal

パスワードまたは仮パスワード
変更後のパスワード
変更後のパスワード(再入力)

以下の内容で送信しますがよろしいですか？

仮パスワード設定 | WebProgrammingPortal

仮パスワードを生成したいメールアドレス

アカウント削除 | WebProgrammingPortal

アカウント削除の際の注意事項:

ご登録頂いているアカウント情報が全て削除されます。
まだ有効な有料会員権が残っている状態でアカウント削除を行い、再度アカウント作成をされた場合でも過去の入金データとの照らし合わせは非常に困難となるため有料会員権の復旧は基本的に行っておりません。
この注意事項にご了承頂ける場合のみ以下の『同意して削除する』を選択しアカウント削除を行って下さい。

アカウント削除に関する確認事項
パスワード

以下の内容で送信しますがよろしいですか？

登録情報の確認と変更 | WebProgrammingPortal

登録メールアドレス:

登録パスワード:

＊＊＊＊＊＊＊＊

※クレジット決済時やサービスに関するお問い合せはへ

有料会員権の確認と購入 | WebProgrammingPortal

以下の内容で送信しますがよろしいですか？

有料会員権の自動更新設定の変更 | WebProgrammingPortal

以下の内容で送信しますがよろしいですか？

現在の自動更新設定の削除 | WebProgrammingPortal

以下の内容で送信しますがよろしいですか？

undefined | WebProgrammingPortal

該当データが見つかりません。大変お手数ですがURLや入力データを確認後、再度アクセスして下さい。