CSS中的transition（过渡）、transform（转换）和animation（动画） |
您所在的位置：网站首页 › 用css实现动画效果 › CSS中的transition（过渡）、transform（转换）和animation（动画） |
CSS中的transition（过渡）、transform（转换）和animation（动画）
|
一、 transition（过渡）
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
transition: all 1s;
属性值说明默认值是否可省略属性需要变化的CSS属性，需要所有属性都变化，使用all,或者单独写出来(宽高、背景颜色、内外边距)都可以否花费时间单位s（必须写单位）否运动曲线远动曲线ease是何时开始设置延迟触发的时间0S是
谁做过渡给谁加经常搭配:hover一起使用
二、 transform（转换）
三维坐标系
scale（缩放） 不会影响其他盒子可以设置缩放的中心点普通缩放 会影响其他盒子盒子高度只能向下延伸 skew（倾斜） transform: skewX(45deg); /* 沿着x轴倾斜45度 */ transform: skewY(45deg); /* 沿着y轴倾斜45度 */ transform: skew(45deg,45deg); /* 沿着xy轴的对角线倾斜45du */ perspecstive（透视）
z:就是z轴，物体距离屏幕的距离，z轴越大(正值)，我们看到的物体就越大 3D呈现 transform-style: flat; /* 子盒子不开启立体空间 */ transform-style: preserve-3d; /* 子盒子开启立体空间 */ 控制子盒子是否开始三维立体环境代码写给父级，但影响的是子盒子 综合写法 transform: translate() rotate() scale() ...等其顺序会影转换的效果。（先旋转会改变坐标轴方向，移动放在最前面） 三、 animation（动画） 动画序列 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 综合写法 animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;注意：综合写法不包括：animation-play-state。如果有多个动画，用逗号隔开 属性描述默认值其他参数是否可省略animation表示简写（除了animation-play-state属性）否@keyframes定义动画否animation-name定义@keyframes动画的名称否animation-duration定义动画完成一个周期需要的时间0s否animation-timing-function定义动画的速度曲线ease（以低速开始然后加快最后以低速结束）linear（匀速）ease-in（低速开始）ease-out（低速结束）ease-in-out（低速开始和结束）steps()（步长）是animation-delay规定动画何时开始（延时）0（不延时）是animation-iteration-count定义动画被播放的次数1（播放一次）infinite（循环播放）是animation-direction定义动画是否在下一周期逆向播放（反着来）normal（不反着来）alternate（逆向播放）是animation-play-state定义动画是否正在运行或暂停runningpaused（动画停止）是animation-fill-mode定义动画结束后状态forwards（停在结束的位置）backwards（返回来）是 /*用keyframes 定义动画（类似定义类选择器）*/ @keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; } } /*元素使用动画*/ div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; } animation: myfirst 5s linear 2s infinite alternate; |
d:透视也叫视距，就是眼睛到屏幕的距离【本文地址】
今日新闻 |
推荐新闻 |