一,animation属性

1.在css3中定义了新属性animation用于制作动画效果

2.一个完整的动画效果由animation属性和@keyframes动画帧组成

二,animation子属性

1.animation是一个简写属性,包含了其他子属性

(1)animation-name:规定动画名称

(2)animation-duration :规定动画完整执行的时长

(3)animation-timing-function :规定动画的执行曲线

(4)animation-delay : 规定动画的开始之前的延迟

(5)animation-iteration-count : 规定动画执行的次数

(6)animation-direction :规定动画是否应该轮流反向播放动画,默认normal

(7)animation-fill-mode : 规定动画时间之外的状态

(8)animation-play-state :规定动画是运行还是暂停。

2.注意至少定义animation-nameanimation-duration两项 CSS3 动画属性,并将它绑定到某个选择器,否则不会产生动画效果

三 , @keyframe规则定义动画帧

1.@keyframes 规则用于创建动画帧。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

2.使用百分比来规定变化发生的时间,或用关键词 "from""to",等同于 0%100%0% 是动画的开始,100% 是动画的完成。

 div{animation: changeBgColor 2s ease-in-out}@keyframes changeBgColor{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

四,常用动画库

1.animate.css

五,兼容

1.SafariChrome 支持替代的 -webkit-animation 属性。Internet Explorer 9 以及更早的版本不支持 animation 属性

css3动画属性animation相关推荐

  1. CSS3动画属性 animation详解(看完就会)

    CSS3动画属性 animation 文章包含个人理解错误请指出   往期文章 [css高级]变量详解 轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...

  2. css情景动画,css3中的动画属性animation应用场景及编写代码教程

    讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...

  3. 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段:   //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...

  4. 1分钟深入了解CSS3的动画属性animation

    拖好久的animation-温馨提示,先看效果,代码附在讲解后 上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...

  5. html animation 属性,CSS3动画属性:动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  6. CSS3动画属性总结

    动画的分类: CSS3中的动画分为:transform(平移动画).transition(过渡动画)animation (帧动画)三种. 平移动画属性:transform有如下属性: 1.平移属性:t ...

  7. CSS3 动画属性 - 逆战班

    1.transition: 过渡 transition :过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒 速度效果的速度曲线 过渡效果何时开始 1)过渡效果的 CSS 属性的名称(一般有 ...

  8. CSS3动画属性之Transition

    Transition 属性(过渡动画) Transition 属性是可以让元素从一个状态转换成另一个状态,这就是过渡. 一.前言 之前有段时间总是混淆 transition 和 transform 属 ...

  9. css3动画:animation

    例: -webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infin ...

最新文章

  1. 【控制】《复杂运动体系统的分布式协同控制与优化》-方浩老师-第11章-意图场模型干预下的人机共享控制
  2. css设置input框长度_干货极致分享浅谈CSS属性,有趣的盒模型。网友:哎呦不错哦!...
  3. maple里面怎么搜索_C#基础系列06 全栈第三步 说好的增加搜索
  4. 理解音视频 PTS 和 DTS
  5. Codeigniter中创建LeanCloud云函数实现微信支付
  6. android 休眠任务不执行_Springboot Scheduled任务为什么不执行?
  7. abb机器人离线编程软件叫做_Robotstudio软件:ABB机器人机器视觉位姿引导虚拟仿真...
  8. 流量星球:实操!利用“拼多多砍价群”日吸100+精准女粉引流技术
  9. 电风扇计算机控制系统,语音识别电风扇控制系统设计.doc
  10. ENVI处理高分一号PMS影像数据
  11. 最全java面试题整理(持续更新)
  12. 干货分享~做到这几点可以高效地Revit建模!
  13. css中一个一个字显示效果
  14. SeEnableDelegationPrivilege权限的利用
  15. Rolling back JDBC Connection [org.sqlite.jdbc4.JDBC4Connection
  16. iOS 越狱的Tweak开发
  17. unas基于_UNAS 2.0 Ushare Edition系统 NAS 软件 固件 收费版支持更新
  18. ARDUINO入门教程(二)基本传感器的使用
  19. JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法
  20. 支付宝老版 合作商家ID 安全检验码 查看方法

热门文章

  1. python file readlines_Python File readlines() 方法
  2. C/C++教师评分系统
  3. 小程序拒绝摄像头授权,重新允许无法调起摄像头
  4. 39岁单身程序员入住养老院,网友:这个养老院怎么收费?
  5. 从零开始学ESP32:(三)ESP32的蓝牙GATT服务测试
  6. git 回退到某一次提交版本
  7. 毕业一年我与Java的故事
  8. Unity GUID
  9. MpCmdRun恶意文件下载
  10. 【100%通过率】华为OD机试真题 C++ 实现【字符串解密】【2022.11 Q4 新题】