Question

所以我希望这个div能够以平滑的动画从margin-left:900px转到550px，它可以快速启动并以平滑的方式变慢。这应该发生在页面加载上。

我尝试使用javascript，但无法弄明白......

我知道你可以用CSS3做这样的事情，但是怎么样？谁能给我一个代码示例？尝试谷歌搜索但找不到答案...

假设我有一个带有id的div：

<div id='slide'>

和CSS：

#slide {
  width: 200px;
  height 200px;
  margin-left: 900px;
  background-color: #435;
}

如何为此设置动画？

Answer 1

如果你想在没有javascript交互的情况下在加载时使用CSS动画，你需要使用keyframe animation

#slide {
  width: 200px;
  height 200px;
  margin-left: 900px;
  background-color: #435;
  -webkit-animation: slide 1s ease-out forwards;
  animation: slide 1s ease-out forwards;
}
@keyframes slide {
    100% {
        margin-left:500px;
    }
}
@-webkit-keyframes slide {
    100% {
        margin-left:500px;
    }
}

Demo

forwards使其保持在100％关键帧状态，slide是动画名称，ease-out会在动画播放时使其变慢（请参阅here一个完整列表，here或here生成您自己的列表，1s是动画持续时间，在这种情况下是1秒。

其他说明：

此时动画必须以浏览器为前缀在大多数情况下
如果您愿意，可以包含0％关键帧，默认为
margin-left:900px，但在这种情况下没有必要因为它在#slide CSS
您可以使用任意数量的关键帧，范围从0％到100％
包括十进制格式，例如50.001% { ...
您可以使用from { ...和to { ...编写的另一种表单其中from = 0%和to = 100%

Answer 2

使用transition属性。 E.G。

transition: margin-left 1s ease-out

缓解会产生你想要的效果。（开始快速变慢）

示例：

http://jsfiddle.net/pM6cx/3/

如果要在窗口加载时实现此效果，只需更改onLoad函数中的marginLeft属性，类似于小提琴。

此类任务不需要关键帧。

Answer 3

以下是使用CSS3关键帧的示例：

    #box{
    position:relative;
    top: 100px; 
    left:100px;
    width:100px;
    height:100px;
    background-color: red;
    -webkit-animation: move 5s ease-in-out;
}

@-webkit-keyframes move{
    0% {top: 100px; left: 100px;} 
    100% {top: 100px; left: 500px;} 
}

FIDDLE

修改

在forwards之后添加ease-in-out属性：

-webkit-animation: move 5s ease-in-out forwards;

Updated FIDDLE

这意味着动画将应用动画结束时的属性值

Answer 4

要更改CSS动画的速度，您可以使用animation-timing-function：）

诀窍是寻找合适的功能。 e.g：

animation-timing-function:cubic-bezier(0,.72,.51,1);

您可以使用

http://cubic-bezier.com/#0,.72,.51,1

http://jsfiddle.net/SpacePineapple/54hvZ/

Answer 5

您可以使用css transition：

#slide:hover{transition:all 0.2s ease;width:400px;}

Knee's JSFiddle

如何创建CSS动画

5 个答案: