css使用定义动画anima,CSS Transform和动画
Transform
CSS3中引入的transform属性可以让元素实现变形,旋转,缩放等视觉效果。
2D变化
2D的transform应用在x和y轴上,而3D的则多了一条z轴。
1. Rotate旋转
.box {
transform: rotate(20deg); //顺时针
}
.box2 {
transform: rotate(-20deg); //逆时针
}
可以将一个元素绕着旋转点进行0到360度的旋转操作。默认的旋转点是在元素的中心点上(50% 50%)。
2. Scale缩放
.box {
transform: scale(.5); //缩小为原来的一半
}
.box2 {
transform: scale(2); //放大为原来的两倍
}
你也可以只针对宽度或者高度进行缩放操作。
.box {
transform: scaleX(2); //将宽度变为原来的两倍
}
.box2 {
transform: scaleY(.25); //将高度变为原来的25%
}
3. Skew 倾斜
.box {
transform: skewX(-5deg); //X轴顺时针旋转5度
}
.box1 {
transform: skewY(20deg); //Y轴逆时针旋转20度
}
.box3 {
transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}
4. Translate 平移
.box {
transform: translateX(-10px); //在横轴上向左平移10个像素点
}
.box2 {
transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}
.box3 {
transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}
5. Matrix矩阵
矩阵形式是将变形函数组合成一个矩阵形式进行使用的,通常都需要借助工具。更详细的说明可以参考这里。
这些变形模式可以同时作用在一个元素上。如
.box {
transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2);
}
Transfrom Origin
默认的变换原点是在元素的中心,如果我们想要改变它,可以使用属性transform-origin。它接受两个值,分别指定X和Y轴上的位置。可以使用px或百分比作为单位,也可以使用bottom,left等值进行定义。
.box {
transform: rotate(15deg);
transform-origin: 0 0; //以左上角点为变换点进行旋转
}
3D变化
3D是以2D变化为基础的,只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴,它代表在元素的远近距离。其中正值代表离屏幕越近,负值代表离屏幕越远。
Perspective
perspective在中文中翻译为透视,这个属性值在应用中主要是用来指定元素离观看者的距离,值的设定一般来说设置为< 300px时会有强烈失真,500~1000px失真中等,2000px以上失真轻微。
定义perspective属性可以选择直接定义在transform中,如:
.box {
transform: perspective(300px) rotateX(20deg);
}
也可以选择定义在父元素上,这样,所有子元素都将使用这个值:
.parent {
perspective: 300px;
}
.child {
transform: rotateX(20deg);
}
perspective-origin
这个属性是叫做“透视原点”,可以使用X轴与Y轴的长度数据或百分比,以及left/center等值进行设置。默认值为50% 50%。可以看做镜头在平面上的距离。
backface-visibility
这个属性用来控制是否可以看到被挡住的那些面,它的值分为visible或hidden。
Transition
transition主要是用来做过渡效果的,可以提供使元素间的变化显得不那么生硬。
属性
值
作用
transition-property
CSS属性值
定义哪些CSS属性会应用transition
transition-duration
时间
定义transition的持续时间
transition-timing-function
时间函数:ease|linear|ease-in|step-start等
用来控制过渡效果速度函数的
transition-delay
时间
延迟
transition属性的合并用法是按照上述的属性顺序进行定义的。缺失的将使用默认值。
.box {
transition: all .5s ease;
}
Animation & Keyframes
要使用CSS动画,需要先定义一个关键帧(keyframes)。关键帧指明在特定时间点元素所展示出来的样式状态。触发的时间点用百分比表示,其中from关键字相当于0%,to关键字相当于100%。在定义关键帧中元素样式时候,!important关键字会被忽略。
@keyframes animationName {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeFromTo {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation的属性有
属性
值
作用
animation-name
定义的keyframes名字
用来获取定义的动画效果
animation-duration
时间长度
用来指定动画从开始到结束所用时间
animation-delay
时间长度
延迟时间
animation-iteration-count
数字(可以使用小数) 或 infinite(无限)
动画循环播放次数
animation-timing-function
linear等
定义动画播放函数,用以控制播放速度曲线
animation-fill-mode
none,forwards,backwards,both
指定当动画播放结束的时候应用到元素上的样式
animation-direction
normal,reverse,alternate,alternate-reverse
控制动画是否反向播放
其简写形式为:
animation : || || || || || || ||
多个动画
当要对一个元素添加多个动画效果时,需要用,分隔开来,如:
.element {
animation: fadeIn 4s 1s infinite linear alternate,
rotate 4s 1s infinite linear alternate;
}
@keyframes fadeIn {
to {
opacity: 0;
}
}
@keyframes rotate {
to {
transform: rotate(180deg);
}
}
css使用定义动画anima,CSS Transform和动画相关推荐
- css规则定义的分类,.css规则定义
文本样式的定义 定义文本样式.保存CSS规则后系统将行动打开"CSS规则定义"对话框. [字体]:选择所需要的字体. [大小]:定义字体大小. [样式]:可选择字体的特殊样式,即& ...
- css规则定义的分类,CSS规则定义英汉对照表
<CSS规则定义英汉对照表>由会员分享,可在线阅读,更多相关<CSS规则定义英汉对照表(4页珍藏版)>请在人人文库网上搜索. 1.CSS规则定义英汉对照表一.类型font-fa ...
- html中定义动画anima,css中animation怎么用
css中animation怎么用 animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,可以让很多其它CSS属性产生动画效果,比如color, background-co ...
- css怎样定义div大小,css如何设置div大小
在css中,可以使用width属性和height属性来设置div大小,只需要给div元素设置"width:值"和"height:值"样式即可.width属性定义 ...
- 前端面试CSS自检(上)CSS基础(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- css使用定义动画anima,css3,transition,animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
- html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
- css梯形 transform和动画
变换梯形: https://blog.csdn.net/m0_37843876/article/details/104413816 css实现梯形标签页: https://blog.csdn.net/ ...
最新文章
- SAP QM 模块主数据
- 检查两个列表在Java中是否相等
- web 三联发票针式打印_不要买二手激光打印机,公开咸鱼卖家套路
- Ubuntu 上安装 Node.js
- Atitit 变量类型系统 目录 1. 通用类型系统 (Common Type System)	1 1.1. CTS 的类型[编辑]	1 2. CLR支持两种基本类型:值类型和引用类型。因此,还是把
- 在Dynamics 365 Fo/AX2012中获取不同类型的时间
- 内码输入法手机版下载_内码输入法
- js实现身份证号查询相关信息
- Equalizer 分布式渲染 在一同一台电脑启动多窗口
- mac tab command没法切换窗口
- PHPUnit 入门
- [转载]汇编语言程序设计第二版答案 沈美明
- 使用 python 创建更改 word 文档
- [CodeM美团比赛] 优惠券
- python 如何提取 word 内的图片
- 关于gps测量精度的分析
- 微信小程序 发布后强制更新版本 强制覆盖老版本
- C++中的 RTTI
- 【利用Nginx实现白名单功能】
- SQL Server 2016下载安装教程