CSS @keyframes| サンプル書き方 | 実例タグ | プロパティ・セレクタ| 4

2018-06-18 css-demo

@keyframes CSS コードサンプル DEMO ページ

情報：

多くのCSSスタイルを持つ多くのキーフレームセレクタ

<!DOCTYPE html>
<html>
<head>
<title>CSS @keyframes  Example</title>
  <style> 
div {
    width: 200px;
    height: 110px;
    background: url("/img/demo/fish.png") no-repeat;
    position :relative;
    -webkit-animation: refmove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: refmove 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes refmove {
    0%   {top: 0px; left: 0px; background: url("/img/demo/fish.png") no-repeat red;}
    25%  {top: 0px; left: 100px; background: url("/img/demo/fish.png") no-repeat blue;}
    50%  {top: 100px; left: 100px; background: url("/img/demo/fish.png") no-repeat yellow;}
    75%  {top: 100px; left: 0px; background: url("/img/demo/fish.png") no-repeat green;}
    100% {top: 0px; left: 0px; background: url("/img/demo/fish.png") no-repeat red;}
}
/* Standard syntax */
@keyframes refmove {
    0%   {top: 0px; left: 0px; background: url("/img/demo/fish.png") no-repeat red;}
    25%  {top: 0px; left: 100px; background: url("/img/demo/fish.png") no-repeat blue;}
    50%  {top: 100px; left: 100px; background: url("/img/demo/fish.png") no-repeat yellow;}
    75%  {top: 100px; left: 0px; background: url("/img/demo/fish.png") no-repeat green;}
    100% {top: 0px; left: 0px; background: url("/img/demo/fish.png") no-repeat red;}
}
  </style>
</head>
<body>
<h1>@keyframes  CSS プロパティ Example</h1>
<div></div>
</body>
</html>

@keyframesサンプル実行結果

：@keyframes ・ @keyframes, コード関連記事

全てリセット

CSS @keyframes | サンプル書き方 | 実例 DEMO タグ | プロパティ・セレクタ | 4 | 書き方 — CSS @keyframes | サンプル書き方 | 実例タグ | プロパティ・セレクタ | 4 – WebRef

2018-06-17css-demo

CSS @keyframes| サンプル 書き方 | 実例 DEMO タグ | プロパティ・セレクタ| 4 | 書き方

@keyframes CSS コード サンプル DEMO ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

CSS @keyframes| サンプル書き方 | 実例 DEMO タグ | プロパティ・セレクタ| 4 | 書き方

@keyframes CSS コードサンプル DEMO ページ