@keyframes规则——基础实现动画效果

最新推荐文章于 2022-03-05 16:55:21 发布

I'm Mr.C

最新推荐文章于 2022-03-05 16:55:21 发布

阅读量997

点赞数 4

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44849271/article/details/107420655

版权

CSS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

CSS3创建动画

@keyframes规则的使用

@keyframes 自定义动画名称{ 规则 }

例如：

@keyframes custom_animation_name{ from {font-size: 50px;} to {font-size: 300px;} }

from是指动画开始的CSS样式，to是指动画结束的CSS样式。
from动画开始时字体大小为50px，动画结束时字体大小为300px。这就形成了一个动画的效果，字体由小变大的一个规则。

规则定义好后就该绑定标签

需要动起来的标签就要绑定动画了（将动画效果应用在指定的标签上）。

绑定动画到标签上需要 animation属性

animation:动画效果的名称时间

h1{ animation:custom_animation_name 6s; }

h1标签就绑定了custom_animation_name动画，并在6秒内完成

具体例子：

<style>
//*动画效果*
@keyframes custom_animation_name{
  from  {font-size: 50px;}
  to  {font-size: 300px;}
}
h1{
//*<h1>标签绑定动画*
  animation:custom_animation_name 6s;
}
</style>
//*<h1>标签是需要“动”起来的标签（由小到大的变化）*
<body>
<h1>HelloWorld</h1>
</body>

h1标签实现了由50px变300px的动画效果，并在6秒内完成。

@keyframes 自定义动画名称{//百分比定义规则规则 }

规则的定义不仅仅只有 from 和 to，还能用百分比。
例子：

@keyframes custom_animation_name{
  0% {font-size: 50px;}
  50% {font-size: 100px;}
  100% {font-size: 50px;}
}

from就相对于0%，to相对于100%。
CSS3 animation 属性并不少，我们还可以控制动画效果是否循环播发，是否反向实现动画效果…

I'm Mr.C

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录