web-dev-qa-db-ja.com

左のCSSアニメーションからスライドイン

簡単なアニメーションを作成したいのですが、ページが読み込まれると、ロゴがボックスの左側から右側にアニメーション化されます。私は多くのバージョンを試しましたが、まだ成功していません。

HTML

<body>

<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>

CSS

div
{
 width:640px;
 height:175px;
 background:blue;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 position:absolute;
}
div img
{
 -webkit-transform: translate(3em,0);
 -moz-transform: translate(3em,0);
 -o-transform: translate(3em,0);
 -ms-transform: translate(3em,0);
}
htmlcsscss-animations
6
user2165458

キーフレームを使用してみてください。

div {
  width: 50px;
  height: 40px;
  background: blue;
  position: relative;
  left: 500px;
  -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;
}
@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
<div></div>
15
Aaron

トランジションの代わりにアニメーションを使用する必要があります。遷移効果は、クラスを追加するクリックやホバーなど、特定のイベントでトリガーされます。

div img {
    animation: example 1s ease-in-out forwards;
}

@keyframes example {
    from {transform: transition(0,0)}
    to {transform: transition(3em,0)}
}

もちろん、そのプレフィックス、webkit、mozなどを追加する必要があります。

Css3のキーフレームアニメーションに関する基本的な知識： http://www.w3schools.com/css/css3_animations.asp

1
Frederik Witte