过渡：transition

这个动画意义上是补间动画（自动完成从起始状态到终止状态的过渡，不用管中间的状态），与通过一帧一帧按照固定顺序和速度播放的帧动画不同

transition包括四个属性

transition-property：让哪些属性进行过渡，all（宽度背景色），width
transition-duration：过渡的持续时间
transition-timing-function：运动曲线,
- linear：线性
- ease：减速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速
transition-delay：过渡延迟，多长时间后执行这个过渡动画
综合写法

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;

转换：transfrom

转换可以实现元素的位移、旋转、变形、缩放甚至支持矩阵方式

2D转换：缩放(scale)、移动(translate)、旋转(rotate)
3D转换：旋转(rotateX rotateY rotateZ)、移动(translateX translateY translateZ)、透视(prespective)、3D呈现(transform-style)

缩放：scale，进行缩放时不会挤走兄弟元素

transfrom:scale(x,y)
//x：水平方向的缩放倍数，y：垂直方向的缩放倍数
//大于1表示放大，小于1表示缩小，一个值等比例缩放

位移：translate，可以让绝对定位的盒子在父亲中居中

transfrom: translate(水平位移,垂直位移)
//百分比相对于自身移动，正值向右向下，负值向左向上，一个值则表示水平移动

旋转：rotate，一般旋转要同时设置一个过渡动画，不要会一步到位旋转到目标位置体验感不好
旋转时默认按照盒子正中心为坐标原点，transfrom-origin属性可以改变旋转的坐标原点

transfrom: rotate(角度)
//正值：顺时针，负值：逆时针
transform-origin: center bottom; /*旋转时，以盒子底部的中心为坐标原点*/

动画

设置多个节点精确控制一个或一组动画
定义动画的步骤

通过@keyframe定义动画
将这段动画通过百分比，分割成多个节点，然后再各节点中分别定义各属性
在指定元素李，通过animation属性调用动画

//定义动画：@keyframes 动画名{from{ 初始状态 }to{ 结束状态 }}
animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

【CSS3】动画详解相关推荐

CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言本文主要内容: 过渡:transition 2D 转换 trans ...
css3动画详解 ——复习（笔记）
本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡. ...
CSS3 animation-fill-mode详解
CSS3 animation-fill-mode详解定义 animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式. 默认情 ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画创建工程,添加2个ViewController,通过rootViewContro ...
[转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页所有文章 JavaScript HTML5 CSS 基础技术前端职场工具资源更多频道▼ - 导航条 -首页所有文章JavaScr ...
Android Animation动画详解（二）：组合动画特效
前言上一篇博客Android Animation动画详解(一): 补间动画我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
Android 动画详解-思维导图版
转载请注明链接: https://blog.csdn.net/feather_wch/article/details/81503233 涉及视图动画(补间动画.逐帧动画).属性动画三种动画的使用方法, ...
vue3过渡和动画详解
vue3过渡和动画详解一.认识动画二.Vue的transition动画三.Transition组件的原理四.class添加的时机和命名规则五.过渡css动画六.同时设置过渡和动画七.过渡 ...

【CSS3】动画详解

过渡：transition

转换：transfrom

动画

【CSS3】动画详解相关推荐

最新文章

热门文章