css动画详解 (transition animation)
属性
transition(4个属性):
transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transition-duration: 5s; /*持续时间,默认为0*/transition-timing-function: ease; /*速度*/transition-delay: 3s; /*延迟*/
animation(7+个属性)
animation: myfirst 5s linear 2s infinite alternate backwards;/*简写*/
/*参数依次是:
name/duration/timing-function/delay/iteration-count/
direction (方向,重复多次时起作用,表示是否逆向播放,alternate逆向/
play-state(动画状态,running开启)/
fill-mode (动画结束时候的停留位置,backwards开始帧停留,forward结束帧停留)*/
/* infinite:无限次的 */
transform 又是什么
元素的一个移动属性,修改具体的参数,元素会做静态移动,也可以作为动画的变化属性;包含5个值:
- translate3d(x,y,z) 控制元素在页面上的三轴的位置;
- rotate(deg) 旋转角度;
- skew[x,y](deg) 倾斜度的;
- scale3d(x,y,z) 放大缩小,属性是比值;
- matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,数学性较强。
区别
- transition只能设置开始与结束2个关键帧的状态,多个关键帧可以使用 @keyframes 规则撰写动画
transition: width 2s ease, height 2s ease;@keyframes addWidth{from{width:100px; /*一般的元素属性变化*/transform: translate3d(-500%,0,0); /*transform控制的变化*/}to{width:200px;transform: none;}}
/*或者用0%到100%*/
@keyframes addWidth{0%{width:100px;}50%{width:200px;}100%{width:100px;}}
- 触发条件:transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
- 循环:animation可以设定循环次数
- 与JavaScript的交互:animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果。
详细分析见这篇文章:
兼容处理
/*CSS样式,animation一样*/
-webkit-transition: all .5s ease; /*--chrome,safari--*/
-moz-transition: all .5s ease; /*--firefox--*/
-ms-transition: all .5s ease; /*--IE--*/
-o-transition: all .5s ease; /*--opera--*/
transition: all .5s ease; /*--W3C--*//*写动画*/
@-webkit-keyframes demo{/*--chrome,safari--*/}
@-moz-keyframes demo{/*--firefox--*/}
@-ms-keyframes demo{/*--IE--*/}
@-o-keyframes demo{/*--opera--*/}
@keyframes demo{ /*--W3C--*/}
详细参考:
https://www.w3.org/TR/css3-animations/
转载于:https://www.cnblogs.com/flora-dn/p/7240541.html
css动画详解 (transition animation)相关推荐
- 超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
- Android Animation动画详解(二): 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- vue3过渡和动画详解
vue3过渡和动画详解 一.认识动画 二.Vue的transition动画 三.Transition组件的原理 四.class添加的时机和命名规则 五.过渡css动画 六.同时设置过渡和动画 七.过渡 ...
- 学习笔记-Flutter 动画详解(一)
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 -首页所有文章JavaScr ...
- Unity中的Animator动画详解
Unity中的Animator动画详解 Animator动画导入 Animator动画详解 动画类型选择 Rig面板属性 Mode面板属性 Animation面板属性 动画片段 控制使用 Animat ...
- CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- Android 动画详解-思维导图版
转载请注明链接: https://blog.csdn.net/feather_wch/article/details/81503233 涉及视图动画(补间动画.逐帧动画).属性动画三种动画的使用方法, ...
最新文章
- 脉冲20KV高压发生器电弧打火
- 使用AOP+Annotation实现操作日志记录
- Git提交branch到remote
- Collatz函数的C++递归实现
- VisualStudio2010 SP1 SP1 SDK SQLServer 2008 SP3 下载地址
- 关于Eureka的几个问题
- 蒙特卡洛采样_PR Sampling : 蒙特卡洛采样、重要性采样及python实现
- maven使用mvn命令创建项目异常java.lang.NoClassDefFoundError: org/apache/commons/collections/ExtendedProperties
- java observable 使用_如何使用rxjava2取消Observable.timer?
- html5+桌面推送,HTML5 Web Notifications 桌面推送小记
- 廖雪峰Python 3.X 教程
- SEO的艺术(原书第2版)
- 虚拟板式混响插件:Fuse Audio Labs VREV-140 Mac
- 福到了 分数 15作者 陈越单位 浙江大学
- 如何快速上手操作Mac电脑?新手问号
- 虚拟机服务器安装虚拟机的步骤
- Android-69-音视频开发:AnyChat for Android SDK
- 什么叫创建oracle实例,请问建立数据库实例是什么意思
- 深度学习——注意力机制
- 如何计算马来西亚的每月PCB所得税