从左侧的CSS动画中滑入 [英] Slide in from left CSS animation

查看:1040
本文介绍了从左侧的CSS动画中滑入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想制作一个简单的动画,当页面加载时,我的标志应该从框左侧向右侧动画。我尝试了很多版本,但还没有成功。

HTML

 < body> 

< div>
< img src =logo.pngalt =logostyle =width:170px; height:120px;>
< / div>
< / body>

CSS

  div 
{
width:640px;
height:175px;
背景:蓝色;
-webkit-transition:所有1s缓和;
-moz-transition:全部1s缓和;
-o-transition:全部1s缓和;
-ms-transition:所有1s易于进出;
位置:绝对;
}
div img
{
-webkit-transform:translate(3em,0);
-moz-transform:translate(3em,0);
-o-transform:translate(3em,0);
-ms-transform:translate(3em,0);


解决方案

尝试使用关键帧。 p>

  div {width:50px; height:40px;背景:蓝色;位置:相对; left:500px; -webkit-animation:slideIn 2s转发; -moz-animation:slideIn 2s转发; 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>


I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.

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);
}

解决方案

Try using keyframes.

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>

这篇关于从左侧的CSS动画中滑入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆