animation-direction | 実例 CSS プロパティ・セレクタ (3)

animation-direction | 実例 DEMO CSS プロパティ・セレクタ (3) | 書き方

2018-06-16 css-demo

animation-direction サンプルプログラムコードページ

情報：

<!DOCTYPE html>
<html>
<head>
<title>CSS animation-direction Example</title>
  <style> 
div {
    width: 200px;
    height: 150px;
    background: url("/img/demo/fish.png") 25px no-repeat;
    position: relative;
    -webkit-animation: refmove 5s 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
    animation: refmove 5s 2;
    animation-direction: reverse;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes refmove {
    0%   {background:url("/img/demo/fish.png") 25px no-repeat red; left: 0px; top: 0px;}
    25%  {background:url("/img/demo/fish.png") no-repeat yellow; left: 200px; top: 0px;}
    50%  {background:url("/img/demo/fish.png") 25px no-repeat blue; left: 200px; top: 200px;}
    75%  {background:url("/img/demo/fish.png") no-repeat green; left: 0px; top: 200px;}
    100% {background:url("/img/demo/fish.png") 25px no-repeat red; left: 0px; top: 0px;}
}
@keyframes refmove {
    0%   {background:url("/img/demo/fish.png") 25px no-repeat red; left: 0px; top: 0px;}
    25%  {background:url("/img/demo/fish.png") no-repeat yellow; left: 200px; top: 0px;}
    50%  {background:url("/img/demo/fish.png") 25px no-repeat blue; left: 200px; top: 200px;}
    75%  {background:url("/img/demo/fish.png") no-repeat green; left: 0px; top: 200px;}
    100% {background:url("/img/demo/fish.png") 25px no-repeat red; left: 0px; top: 0px;}
}
  </style>
</head>
<body>
<h1>animation-direction CSS プロパティ Example</h1>
<h1>アニメーション方向プロパティ</h1>
<p>アニメーションを reverse 再生</p>
<div></div>
</body>
</html>

animation-directionサンプル実行結果

：animation-direction ・ animation-direction, コード関連記事

全てリセット

animation-direction | 実例 DEMO CSS プロパティ・セレクタ (3) | 書き方 — animation-direction | 実例 CSS プロパティ・セレクタ (3) – WebRef

2018-06-16css-demo

animation-direction | 実例 DEMO CSS プロパティ・セレクタ (3) | 書き方

animation-direction サンプル プログラム コード ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

animation-direction サンプルプログラムコードページ