关于keyframes的用法

技术关于keyframes的用法 关于keyframes的用法CSS3的@keyframes用法详解:@keyframes与animation属性是密切相关的
一.基本知识:keyframes翻译成中文

关于关键帧的使用

CSS3的@keyframes用法详解:

@关键帧与动画属性密切相关。

一.基本知识:

关键帧,翻译成中文,意思是“关键帧”。如果你用过flash,你应该对此有更好的理解。当然,flash没有问题。

Transition属性也可以实现转场动画效果,但有点粗糙,因为它不能更精细地控制动画过程,比如只能控制某个属性在指定时间段内的转场,而动画属性可以结合@关键帧使用,将指定时间段内的动画分割成更具体的动画。

语法:

1 @关键帧animationname {关键帧-选择器{ CSS-style;}}

参数分辨率:

1.animationname:声明动画的名称。

2.关键帧-selector:用于划分动画的持续时间,可以采用百分比或“从”和“到”的形式。

“从”和“到”的形式相当于0%和100%。

这里建议始终使用百分比形式。

1 !DOCTYPE html

2 html

3头

4元字符集=' utf-8 '

5 meta name=' author ' content=' http://www . soft why.com/'

6标题蚁族/标题

7样式类型=“文本/css”

8 div{

9宽度width:100px

10高:100像素;

11背景:红色;

12位置:相对;

13

14动画:动画5s无限交替;

15-web kit-animation : hea animation 5s无限交替;

16-moz-animation :动画5s无限交替;

17-o-animation :动画5s无限交替;

18-ms-animation :动画5s无限交替;

19 }

20 @关键帧图像

从{ left:0px}

22到{ left:200px}

23 }

24 @-网络工具包-图像的关键帧{

从{ left:0px}

26到{ left:200px}

27 }

28 @-moz-关键帧图像{

从{ left:0px}

30到{ left:200px}

31 }

图像的32 @-o-关键帧

从{ left:0px}

34到{ left:200px}

35 }

36 @-毫秒-图像的关键帧{

从{ left:0px}

38到{ left:200px}

39 }

40/风格

41/头

42车身

43分区/分区

44/车身

45 /html

上面的代码实现了一个简单的动画,下面是对:的简要分析。

1.使用@关键帧定义一个名为动画的动画。

2.由@关键帧声明的动画名称应该与动画一起使用。

3 .从到相当于0%-100%,所以意味着一件事在5秒内完成。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/134418.html

(0)

相关推荐

  • ai怎么画三角形,AI如何画裤子款式图啊

    技术ai怎么画三角形,AI如何画裤子款式图啊先介绍第一种办法就是用混合工具~~这样办法呢~有个缺点~~就是拉链在转折的地方不自然 需要分段来处理
    1ai怎么画三角形、用矩形工具画圆角巨型
    2、填充需要的颜色
    3、调整大小

    生活 2021年10月25日
  • activity和singletask(task和activity有什么区别)

    技术Activity的singleTask有什么作用本篇内容主要讲解“Activity的singleTask有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Activ

    攻略 2021年12月18日
  • MySQL表怎么创建自增字段

    技术MySQL表怎么创建自增字段本篇内容介绍了“MySQL表怎么创建自增字段”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成

    攻略 2021年11月18日
  • 公顷怎么读,公里公顷公亩的背读方式

    技术公顷怎么读,公里公顷公亩的背读方式1.面积单位 面积单位有平方公里公顷怎么读、平方米、平方分米、平方厘米、平方毫米等。它们之间的换算关系是: 1平方公里=1000000平方米; 1平方米=100平方分米;

    生活 2021年10月27日
  • 如何分析Vue2cube-ui时间选择器

    技术怎么解析Vue2 cube-ui时间选择器这篇文章给大家介绍怎么解析Vue2 cube-ui时间选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。前言vue2 整合 cube-ui 时间选择器

    攻略 2021年12月20日
  • 香港站群服务器更适合部署哪些业务香港服务器哪家好

    技术香港站群服务器更适合部署哪些业务香港服务器哪家好最近不少客户都来咨询香港多IP服务器、香港站群服务器的问题,对于站群服务器,有些用户还是不是太了解,下面USA-IDC就来简单介绍以下香港站群服务器更适合部署哪些业务以

    礼包 2021年10月22日