代码之家 › 专栏 › 技术社区 › faizan baig

尝试实现CSS动画

css3

2

faizan baig · 技术社区 · 7 年前

嗨,我正在尝试实现CSS动画,我已经实现了@keyframes 但我的动画不适用于我的分区。

我的关键帧是

@keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
}

请告诉我哪里错了。

2 回复 | 直到 7 年前

1

2

Wasif 7 年前

你做得很好,但还没有创建将实现动画的类

创建两个CSS类,如下所示

.fadeIn {
  animation-name: fadeIn;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

动画名称是示例中关键帧的名称,即fadein。

现在在您的DIV中使用这两个类,无论您想在哪里实现。

希望这有帮助。

2

0

Bhawesh Bhaskar 7 年前

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    0%   {top: 0px;opacity:0;}

    100% {top: 100px;opacity:1;}
}
</style>

<div></div>