175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

使用@keyframes轻松进行网站设计中的CSS动画

2019-04-27 来源:小领

使用@keyframes轻松进行CSS动画
 
CSS转换和转换工作精美,可以根据单个状态更改创建可视化交互。为了更好地控制发生的事情和时间,您可以使用CSS动画属性使用@keyframes创建简单的CSS动画。该技术具有广泛的设计应用,可用于构建令人眼花缭乱的预加载器,交互式界面,效果或全面讲故事。在本教程中,您将学习如何应用您对CSS过渡的了解以快速掌握动画,以及如何使用@keyframes以不同的时间间隔对元素应用各种样式规则。


如果您错过了它,请查看Easy CSS动画转换和转换,让您的思维思考您的元素应该如何移动。CSS过渡和动画几乎相同,动画可以通过为元素定义不同样式更改生效的定义时间线来深入挖掘。

@keyframes
CSS关键帧允许更改自动且连续地运行,而不是仅仅响应鼠标事件的转换方式。它们为我们提供了一种方法,可以在状态更改或通过jQuery检测到的事件(例如滚动)期间的任何时刻更改给定选择器上的CSS声明。关键帧配对与animation设置该属性duration,timing function,delay和direction 代替的transition。transform然后,在@keyframes规则中声明属性,如果是动画的一部分。

首先,每个@keyframe规则都有一个唯一的名称:

@keyframes animation-name{ }
此名称用于元素的样式,以将其与动画配对:

.element {   
   animation: animation-name; 
}
在其中,您设置一个百分比规则,表示要在元素上呈现的声明的CSS样式沿着动画的时间轴的点:


@keyframes animation-name {   
  0% {     
    color: pink;   
  }   
  50% {     
    color: yellow;   
  } 
  100% {
    color: blue;
   }
}
在此示例中,div具有element从粉红色到黄色到蓝色的类的元素。你也可以使用from,to只在两点之间进行:

@keyframes animation-name {   
  from {     
    color: black;   
  }   
  to {
    color: white;
   }
}
以下是将此简单规则应用于以下背景颜色更改的示例body:

body {
  animation: change-background 4s ease infinite;
}

animation 属性
如果没有一些定义诸如持续时间,计时功能和方向之类的指令,@ keyframes本身就什么都不做,每个指令都像在transition 属性中那样工作。可以animation使用以下语法在一个声明中声明这些动画子属性:

animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name;
或者通过将动画附加到每个子属性的开头来单独设置:

animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: infinite;
......你明白了。

并非所有这些子属性都是必需的,但它们必须按正确的顺序排列,以便浏览器可以将计时值应用于正确的位置,或者将动画名称与其他关键字区分开来。以下是您最常使用的子属性的快速简化:

duration - 设置动画从开始到结束的运行时间。
timing-function - 设置动画沿着时间“轨道”移动的方式,即轻松,轻松,线性等。
delay - 在开始动画序列之前等待多长时间(如果有的话)。
iteration-count- 播放动画或infinite循环动画的次数。

除了属性值,我们已经熟悉了感谢transition,动画需要direction,iteration-count,play-state和fill-mode。


默认情况下,动画会经历一个周期,然后结束。该animation-iteration-count子属性值可以使用任何表示动画应该多少次运行次数,或无限的关键字无限期地运行它进行设置。

该animation-direction子属性没有定义动画的视觉方向(你的风格规则定义的位置和开始和结束的状态),而是告诉动画其中以运行关键帧。此子属性可以设置为normal,reverse,alternate,和alternate-reverse。

该normal值从头到尾播放动画。在写入规则时,反向值会向后或从下到上播放,从100%开始向后工作到0%。
该alternate值将向前播放动画然后向后播放,并且交替向后播放它,然后向前播放。

该animation-fill-mode子属性决定是否动画风格应前或在动画播放后仍然可见。

默认情况下(normal),动画关键帧内定义的样式不会影响播放动画之前或之后的元素。如果您需要将动画的结束状态变为新状态直到发生其他情况,或者将突然更改恢复到原始状态(如上面的背景更改演示中所示),则设置填充模式值非常有用。 )。以下是每个值的作用细分:

backwards - 在播放动画并设置延迟之前,将应用初始关键帧的样式(0%)。
forwards - 播放动画后,最后一个关键帧(100%)中定义的样式保持活动状态。
both - 动画将遵循向前和向后的规则。
您将看到如何在悬停效果上使用填充模式,以防止在下面发生突然闪烁。

播放状态值可以设置为paused或running。一种有用的实现方法play-state是将其设置为在悬停时暂停。如果你看一下我们上面的第一个例子,将鼠标悬停在栏上,突出显示每个关键帧,它会暂停。

.highlight {
  animation: move-highlight 4s linear infinite;
}
.highlight:hover{
  animation-play-state: paused;
}

请注意,您可以使用animation: paused;或animation-play-state: paused;,但最好在重置或覆盖状态更改时的先前值时声明特定的子属性。

使用动画和@keyframes在图像悬停上创建快门效果

此示例演示如何在图像悬停时在图像库上创建“快门”效果。与使用转换的简单悬停效果不同,此CSS动画使用关键帧逐渐更改伪元素的不透明度,同时更改其大小,并删除添加到每个图像的原始状态的CSS3灰度滤镜。

以下是图像包装器和将覆盖它的伪元素的CSS的重要部分:


figure {
  position: relative; 
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
  filter: grayscale(.8);
}
figure::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
注意filter并opacity设置这些元素。这些声明在触发动画之前定义其默认状态。


figure:hover{
    animation: bloom ease-in-out .75s forwards;
}
figure:hover::before {
    animation: circle .75s;
}
现在我们animation为要触发动画的事件设置属性。使用:hover是最简单的 - 您还可以在使用jQuery检测到的事件上设置特殊的类名。

在第一个动画中,我们将它链接到bloom关键帧,给它一个ease-in-out定时功能,将播放超过0.75秒,然后由于动画填充模式设置返回到原始样式forwards- 这确保我们的效果不会只是回到原始的灰度效果。在我们的第二个动画中,我们将它链接到circle关键帧并告诉它在相同的.75秒内播放。


@keyframes bloom {
    0% {
        filter: grayscale(.8);
    }
    40% {
        filter: grayscale(.5);
    }
    100% {
        filter: grayscale(0);
    }
}
@keyframes circle {
    0% {
        opacity: .5;
                background: rgba(213,156,34,.2);
    }
    40% {
        opacity: 1;
                background: rgba(213,34,160,.2);
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
在我们的bloom动画中,我们将在动画设置的数字元素上声明的灰度过滤器从.8到无。动画结束后,由于我们的动画填充模式,它会保持为0。如果我们没有设置它,它会突然回到灰度级。

在我们的第二个动画中circle,我们将元素不透明度从一半变为全,将颜色更改为黄色然后变为粉红色,然后将元素展开为更大,同时将不透明度恢复为0。

这是创建简单“脉冲”或“快门”效果的基础。请注意,该元素opacity与颜色的RGBA不透明度分开!

快捷键
一旦你掌握了CSS动画的基础知识,就可以看出提出无限可能性是多么容易。即使如此,仍然存在许多优秀的代码库和工具来帮助我们快速实现CSS动画。以下是一些最好的:

animate.css
之前,我向您展示了如何使用Flexbox创建分屏布局,然后使用animate.css库为内容页面和图像的开放设置动画。Animate.css提供了几个预先制作的动画,您可以预览,然后使用单个类名来放入项目。更重要的是,它提供了一种开始学习如何使用jQuery从元素中应用和删除CSS类的好方法。请务必查看该教程,了解如何启动有关点击或滚动点等活动的动画。

Cubic Bezier工具
cubic-bezier.com提供了一个精彩的视觉界面,用于制作您自己的立方贝塞尔计时功能,并实时查看结果。可以将代码段复制并粘贴到样式表中。

CSS Animate
该CSS动画的Web工具可帮助您生成完整的关键帧和动画代码块对编码复杂的时间表提供快速启动。如果您曾经使用Flash,这可能看起来很熟悉。只需单击时间轴上的某个点,将元素拖动到位,设置其动画属性,然后对时间轴上选择的每个新点重复。播放完成的代码以进行优化,然后复制/粘贴。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=127
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov.com 版权所有
鲁公网安备37020302372323
ICP证: 鲁ICP备18056479号

关注领创公众平台

添加官方微信

175 6191 5976