📜  CSS 浮动动画

📅  最后修改于: 2021-10-29 03:54:19             🧑  作者: Mango

在本文中,我们将解释 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


 

    Floating Animation
    

 

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


样式文件

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浏览器
  • 火狐
  • 歌剧
  • 苹果浏览器