web前端全栈0基础到精通（祺）13

CSS3过渡、变换与动画

CSS3过渡属性

通过CSS3可以在不使用Flash动画或JavaScript的情况下，为元素从一种样式变换为另一种样式时添加效果。而CSS3过渡就是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

规定你希望把效果添加到哪个CSS属性上规定效果的时长
transition-property 规定设置过渡效果的CSS属性的名称。
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
- time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0,意
  
  味着不会有效果。
transition-timing-function规定速度效果的速度曲线。
- linear 规定以相同速度开始至结束的过渡效果。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
- ease-in 规定以慢速开始的过渡效果。
- ease-out 规定以慢速结束的过渡效果。
- ease-in-out 规定以慢速开始和结束的过渡效果。
transition-delay 定义过渡效果从何时开始。
- time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
transition属性简写
- ```
div {transition:width 1s linear 2s;
}
```

CSS3的 transform 属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行位移、旋转、缩放或倾斜。
语法：
- transform: none|transform-functions:
  
  transform属性的初始值是none。
  
  transform-functions设置变形函数。如translate ()移动元素、rotate ()旋转元素、 scale()缩放元素、skew()倾斜元素等。
浏览器支持：
- Internet Explorer 9 要求前缀-ms-版本，Internet Explorer 10、 Firefox 和Opera 支持 transform 属性。Chrome 和 Safari 低版本要求前缀-webkit-版本。目前大部分浏览器都支持transform标准属性。
2D 转换
- 2D位移
  - 通过 translate () 函数能够重新定位元素的坐标。
  - translate (x, y) 水平方向和垂直方向同时移动
  - translateX(x) 仅水平方向移动(X轴移动)
  - translateY(Y) 仅垂直方向移动(Y轴移动)
  - x、y为正数表示X、Y轴正向位移，负数为反向位移。
    
    通过translate()方法，元素从其当前位置移动，根据给定的x坐标和y坐标
- 2D旋转
  - 通过rotate()函数能够旋转指定的元素对象。
  - rotate(*deg) 参数表示角度值，取值单位是度deg正数表示顺时针旋转，负数表示逆时针旋转。
- 2D缩放
  - 通过scale()函数能够缩放元素大小。
  - scale (x, y) 水平方向和垂直方向同时缩放
  - scaleX(x) 仅水平方向(X轴)缩放
  - scaleY(Y) 仅垂直方向(Y轴)缩放
  - scale()函数传递不同参数时，缩放动画的效果是不同的。参数为数值，可以是正数、负数和小数，默认值为1;使用0到1之间的值缩小元素，使用超过1的值放大元素。负数值则翻转元素，然后再缩放元素。
- 2D倾斜
  - 通过skew()函数能够让元素倾斜显示。
  - skew(x，y) 水平方向和垂直方向同时倾斜
  - skewX(x) 仅水平方向(X轴)倾斜
  - skewY(Y) 仅垂直方向(Y轴)倾斜
定义变形原点
- CSS变形原点默认为对象的中心点，如果要改变这个中心点，可以使用transform- origin 属性进行定义。
- transform-origin: x y;
  
  transform-origin 接受两个参数，参数为一个值时，另一个值默认为center;它们可以是百分比、em、px等具体值；也可以是left、center、right或者top、center、 bottom等描述性关键字。transform-origin的初始值为50% 50%
3D 转换
- 3D变形有3d位移、3d缩放、3d旋转。3D的用法和2D差不多，只不过多了个Z轴的值而己。注意skew扭曲是没有3D的。
- transform-style 属性
  - 规定如何在3D空间中呈现被嵌套的元素。该属性必须与transform属性一同使用。
  - flat 子元素将不保留其3D位置。
  - preserve-3d子元素将保留其3D位置。
  - 注意：若同时设了 transform-style: preserve-3d;和overflow: hidden;, 3D 效果将失效，等价于 transform-style: flat。
- perspective 属性
  - 定义3D元素距视图的距离，以像素计算。当元素定义了 perspective属性后，其子元素会获得透视效果，而不是元素本身。perspective属性只影响3D转换元素。
  - number元素距离视图的距离，以像素计。
  - none 默认值，与0相同，不设置透视。
3D位移
- 在CSS3中，新増translateZ 3D位移函数。功能是让元素在3D空间沿z轴进行位移。
- translateZ( t ) t指的是z轴的向量位移长度。当其值为负值时，元素在Z轴越移越远，导致元素变小。反之当值为正值时，其在Z轴越移越近，导致元素变得较大。
- translate3d(x, y, z)函数，可以同时设置元素在三个轴向的位移大小。
3D旋转
- CSS3中定义的3D 旋转的函数有:rotateX、rotateY、rotateZ、rotate3d 等。
- rotateX(a) a.指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值，元素围绕X轴逆时针旋转。
- rotateY(a) a.指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值，元素围绕Y轴逆时针旋转。
- rotateZ(a) a.指的是一个旋转角度值，如果为正值，元素围绕Z轴顺时针旋转；反之，如果为负值，元素围绕Z轴逆时针旋转。
- rotate3d(x, y, z, angle)
  - x：是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
  - y：是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
  - Z：是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
  - angle：一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。
3D缩放
- scaleZ(z);
CSS3动画属性

animation

定义动画过程

@keyframes 动画名称{

0% {动画开始

}

100% {动画结束

}

}
- animation-name 动画名称（自定义）
  - keyframe name 规定需要绑定到选择器的keyframe的名称。
  - none 规定无动画效果（可用于覆盖来自级联的动画）。
- animation-duration 完成动画的时间
  - time 规定完成动画所花费的时间。默认值是0,意味着没有动画效果。
- animation-timing-function 动画完成曲线
  - linear 规定以相同速度开始至结束的过渡效果。
  - ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
  - ease-in 规定以慢速开始的过渡效果。
  - ease-out 规定以慢速结束的过渡效果。
  - ease-in-out 规定以慢速开始和结束的过渡效果。
- animation-delay 延时
  - time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是0。
- animation-iteration-count 动画播放的次数
  - n 定义动画播放次数的数值。
  - infinite 规定动画应该无限次播放。
- animation-direction 是否轮流反向
  - 定义是否应该轮流反向播放动画。如果animation-direction值是"alternate", 则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。注意：如果把动画设置为只播放一次，则该属性没有效果。
  - alternate 轮流反向播放
  - normal 默认正常
- animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
  - none 不改变默认行为。
  - forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  - backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  - both 向前和向后填充模式都被应用。
- animation-play-state 属性规定动画正在运行还是暂停。
  - paused 规定动画已暂停。
  - running 规定动画正在播放。

动画库

https://daneden.github.io/animate.css/
<div class="animated bounce" id="" ></div>

web前端全栈0基础到精通（祺）13相关推荐

web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面早期三大门户搜狐新浪网易 web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博 web3.0 人工智能复杂的页面功 ...
web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）08
表单表单标签注册和登录目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）13

CSS3过渡、变换与动画

CSS3过渡属性

CSS3的 transform 属性

浏览器支持：

定义变形原点

CSS3动画属性

web前端全栈0基础到精通（祺）13相关推荐

最新文章

热门文章