CSS动画属性 ：transition过渡 、 transform变形、animation动画 |
您所在的位置：网站首页 › css动画animation用完需要清除吗 › CSS动画属性 ：transition过渡 、 transform变形、animation动画 |
|
在 CSS 中，过渡属性：transition， t元素从一种样式逐渐改变为另一种的效果，支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。transform：平移，旋转，倾角等 一、css过渡四要素 1、所过渡的元素必须有css样式语法：transition: name | duration | timing function | delay; transition-property：规定应用过渡的 CSS 属性的名称。transition-duration：过渡所用的时时间。transition-timing-function：过渡元素的时间曲线，属性值有linear(匀速的过程)、ease(逐渐变慢的过程)、ease-in(加速的过程)、ease-out(减速的过程)、cubic-bezier(0,0,0,0)贝塞尔曲线。transition-delay：指定一个过渡的开始时间（即多长时间后开始执行），默认是0。 2、CSS中过渡动画类型可分为四类1、颜色过渡动画（color） 2、尺寸过渡动画（size） 3、形状过渡动画（shape） 4、位置过渡动画（position） 二、transform变形(2D、3D)对元素进行移动、缩放、转动、拉长或拉伸。属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)、perspective(3D透视视图) 1、平移：translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 2、旋转：rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 3、缩放：scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数 三、animation（动画）语法：animation: name duration timing-function delay iteration-count direction; name（需要绑定到选择器的 keyframe 名称）duration（完成动画所花费的时间，以秒或毫秒计）function（动画的速度曲线）delay（动画开始之前的延迟）count（动画应该播放的次数）direction（是否应该轮流反向播放动画） 二、简单例子 DOCTYPE html> CSS 过渡 body{ height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } * { margin: 0; padding: 0; } .box { height: 200px; width: 200px; border: 1px solid #000; transition: all 0.3s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/ -webkit-transform: all 0.3s linear 0s; /* 兼容Safari and Chrome */; -ms-transition: all 0.3s linear 0s; /*兼容IE10+*/ -moz-transform: all 0.3s linear 0s; /*兼容 Firefox */ -o-transition: all 0.3s linear 0s; /* 兼容Opera */ } .box:hover { width: 300px; height: 300px; box-shadow: 0px 0px 5px orange; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |