@keyframes设定动画规则,可以理解为动画的剧本。

  Name。自定义一个动画名称。

  0-100%/from...to...。

  需要变化的css样式属性。

animation所有动画属性的简写。(类似于trasition)

  Animation-name动画的名称。

  Animation-duration动画完成需要的时间。

  Animation-timing-function完成动画的速度设置。

  Animation-delay动画延迟的时间。Infinite是无限次播放。

  ,infinite是无限次。

  Animation-direction规定动画在下一周期是否逆向播放。默认是normal顺向播放, 逆向播放是alternate。

  Animation-play-state规定动画是否正在运行或暂停。默认是running正在播放,规  定动画暂停是paused。

  Animation-fill-mode规定动画时间之外的状态。

    None回到起始位置。

    Forwards设置最后一帧:forwards当动画完成后,保持最后一帧的状态。

    Backwards设置第一帧:backwards延时的时间段内,在动画显示之前,应用 开始的属性。

    both同时应用forwards,backwards。

11.css3动画--自定义关键帧动画--@keyframes/animation的更多相关文章

  1. CSS3实现自定义Checkbox动画

    CSS3实现自定义Checkbox动画是一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾. 源码下载:http ...

  2. html5--6-55 动画效果-关键帧动画

    html5--6-55 动画效果-关键帧动画 实例 @charset="UTF-8"; div{ width: 150px; height: 150px; font-size: 2 ...

  3. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  4. 核心动画基础动画(CABasicAnimation)关键帧动画

    1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...

  5. WPF动画之关键帧动画(2)

    XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  6. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  7. iOS:核心动画之关键帧动画CAKeyframeAnimation

    CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...

  8. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  9. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

随机推荐

  1. spring eclipse xml自动提示

    window -> preferences -> XML -> XML Catalog -> 在User Specified Entries新增加一个catalog

  2. Java第09次实验(IO流)--实验报告

    0.字节流与二进制文件 我的代码 用DataOutputStream和FileOutputStream将Student对象写入二进制文件student.data package test; impor ...

  3. jdbcTemplate的queryForList的使用方法

    jdbcTemplate的queryForList的使用方法如下,它不一样的地方是,它获得的结果,会再放到一个map里去: List rows = jdbcTemplate.queryForList( ...

  4. 鬼知道NOI会不会成为下一个奥数

    认真写作文不可能的,这辈子不可能认真写作文的. (月考,期末考,高考即将到达战场,真香警告) 以下应该成为原稿!!! 真.喜欢写感悟,但我感觉我可能把它写的有点商业化,商业化的文章不可能放的,所以我尽 ...

  5. java 传值

    好文章:https://zwmf.iteye.com/blog/1738574 public class Test { public int i,j; public void test_m(Test ...

  6. 左值引用&右值引用实践【TODO】

    这篇文章写的很好,下半部分还未完全理解,后续还需要回头来看看20190706(): https://www.cnblogs.com/likaiming/p/9045642.html 简单实践如下: # ...

  7. flutter runtimeType

    通过runtimeType可以获取当前数据类型 var a = 10; var b = 10.0; var c = '10'; var d = true; var e = [12.5,13.1]; v ...

  8. 在java poi导入Excel通用工具类示例详解

    转: 在java poi导入Excel通用工具类示例详解 更新时间:2017年09月10日 14:21:36   作者:daochuwenziyao   我要评论   这篇文章主要给大家介绍了关于在j ...

  9. IDEA/Git 提交/commit 忽略 文件夹

    commit的时候.idea文件夹被默认选中了,如果忘记点掉就会被提交上去,想要默认忽略其实很简单. 找到项目根目录处的.gitignore文件(如果是用git版本控制的话) 双击打开之后  我们在最 ...

  10. k8s、CI/CD、pipline介绍

    参照文档: https://blog.csdn.net/qq_35299863/article/details/84329798 https://github.com/xgh2016/k8s-CICD ...