CSS 浮动动画

在本文中，我们将解释 CSS 动画的基础知识以及如何添加浮动动画的演示。 CSS 动画需要以下内容。

• 动画声明。
• 定义获取动画的属性的关键帧。它还提供了说明它们何时以及如何进行动画处理的属性。

基本上 Animation 是以下属性的简写属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode 和 animation-play-状态。在本文中，我们将使用动画名称、动画持续时间、动画迭代计数、动画计时功能。

• 动画名称：浮动（这是指下面定义的@keyframe）。
• 动画持续时间： 3s（这是指动画从开始到结束所需的秒数）。
• 动画迭代计数：无限（停止前动画的循环次数）。
• animation-timing-function： ease-in-out（开始动画和结束动画的时间）。

您可以将它们组合在相同的关键字下，如下所示。

animation: floating 3s ease-in-out infinite

让我们谈谈@keyframes 。它可以控制动画。您可以使用此属性随心所欲地更改动画。首先从@keyframes规则开始，然后是动画名称（在这种情况下，它是“浮动”）。在@keyframes 中，您可以看到已声明了 3 个百分比值。其后是包含属性及其值的代码片段。这些百分比代表动画序列中的断点。

• 0% 选择器包含一个在动画开始时执行的块。
• 50% 选择器包含一个在中间点执行的块。
• 100% 选择器包含一个在动画完成后执行的块。

在每个断点处，我们都有属性转换。允许用户旋转、倾斜、缩放或平移给定元素的变换属性。在这种情况下，我们将使用 translate 属性。基本上翻译可以帮助我们垂直和水平地放置东西。
索引.html

html

 

    
    

 

    

        Arsalan
    

 

样式文件

css

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器