css3动画属性animation
一,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-name
和animation-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.Safari
和 Chrome
支持替代的 -webkit-animation
属性。Internet Explorer 9
以及更早的版本不支持 animation
属性
css3动画属性animation相关推荐
- CSS3动画属性 animation详解(看完就会)
CSS3动画属性 animation 文章包含个人理解错误请指出 往期文章 [css高级]变量详解 轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
- 1分钟深入了解CSS3的动画属性animation
拖好久的animation-温馨提示,先看效果,代码附在讲解后 上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...
- html animation 属性,CSS3动画属性:动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- CSS3动画属性总结
动画的分类: CSS3中的动画分为:transform(平移动画).transition(过渡动画)animation (帧动画)三种. 平移动画属性:transform有如下属性: 1.平移属性:t ...
- CSS3 动画属性 - 逆战班
1.transition: 过渡 transition :过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒 速度效果的速度曲线 过渡效果何时开始 1)过渡效果的 CSS 属性的名称(一般有 ...
- CSS3动画属性之Transition
Transition 属性(过渡动画) Transition 属性是可以让元素从一个状态转换成另一个状态,这就是过渡. 一.前言 之前有段时间总是混淆 transition 和 transform 属 ...
- css3动画:animation
例: -webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infin ...
最新文章
- 【控制】《复杂运动体系统的分布式协同控制与优化》-方浩老师-第11章-意图场模型干预下的人机共享控制
- css设置input框长度_干货极致分享浅谈CSS属性,有趣的盒模型。网友:哎呦不错哦!...
- maple里面怎么搜索_C#基础系列06 全栈第三步 说好的增加搜索
- 理解音视频 PTS 和 DTS
- Codeigniter中创建LeanCloud云函数实现微信支付
- android 休眠任务不执行_Springboot Scheduled任务为什么不执行?
- abb机器人离线编程软件叫做_Robotstudio软件:ABB机器人机器视觉位姿引导虚拟仿真...
- 流量星球:实操!利用“拼多多砍价群”日吸100+精准女粉引流技术
- 电风扇计算机控制系统,语音识别电风扇控制系统设计.doc
- ENVI处理高分一号PMS影像数据
- 最全java面试题整理(持续更新)
- 干货分享~做到这几点可以高效地Revit建模!
- css中一个一个字显示效果
- SeEnableDelegationPrivilege权限的利用
- Rolling back JDBC Connection [org.sqlite.jdbc4.JDBC4Connection
- iOS 越狱的Tweak开发
- unas基于_UNAS 2.0 Ushare Edition系统 NAS 软件 固件 收费版支持更新
- ARDUINO入门教程(二)基本传感器的使用
- JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法
- 支付宝老版 合作商家ID 安全检验码 查看方法