CSS translation

动画过渡属性

文章目录

1、浏览器支持
2、定义和用法
3、语法
4、transition-delay 属性
5、transition-duration 属性
6、transition-property 属性
7、transition-timing-function 属性

1、浏览器支持

translation
-moz-transition：Firefox
-webkit-translation：Safari，Chrome，Edge
-o-transition：Opera

2、定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

**注释：**请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

默认值	继承性	版本	JavaScript语法
all 0 ease 0	no	CSS3	object.style.transition=“width 2s”

3、语法

transition: property duration timing-function delay;

值	描述
`transition-property`	规定设置过渡效果的 CSS 属性的名称
`transition-duration`	规定完成过渡效果需要多少秒或毫秒
`transition-timing-function`	规定速度效果的速度曲线
`transition-delay`	定义过渡效果何时开始

4、transition-delay 属性

定义和用法：

transition-delay 属性规定过渡效果何时开始
transition-delay 值以秒或毫秒计

默认值	继承性	版本	JavaScript 语法
0	no	CSS3	object.style.transitionDelay=“2s”

语法：

transition-delay: time;

值	描述
`time`	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计

示例：

在过渡效果开始前等待 2 秒：

div
{transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome 和 Edge*/
-o-transition-delay: 2s; /* Opera */
}

5、transition-duration 属性

定义和用法：

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

默认值	继承性	版本	JavaScript 语法
0	no	CSS3	object.style.transitionDuration=“5s”

语法：

transition-duration: time;

值	描述
`time`	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

示例：

让过渡效果持续 5 秒：

div
{transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome 和 Edge */
-o-transition-duration: 5s; /* Opera */
}

6、transition-property 属性

定义和用法：

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

**提示：**过渡效果通常在用户将鼠标指针浮动到元素上时发生。

**注释：**请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值	继承性	版本	JavaScript 语法
all	no	CSS3	object.style.transitionProperty=“width,height”

语法：

transition-property: none|all|property;

值	描述
`none`	没有属性会获得过渡效果
`all`	所有属性都将获得过渡效果
`property`	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

示例：

把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：

div
{transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome 和 Edge */
-o-transition-property:width; /* Opera */
}

7、transition-timing-function 属性

定义和用法：

transition-timing-function 属性规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度

默认值	继承性	版本	JavaScript 语法
ease	no	CSS3	object.style.transitionTimingFunction=“linear”

语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
`linear`	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
`ease`	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
`ease-in`	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
`ease-out`	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
`ease-in-out`	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
`cubic-bezier(n,n,n,n)`	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

cubic-bezier(n,n,n,n)：里面的四个n是贝兹曲线的相关参数，参考：css3动画animation-timing-function中的cubic-bezier(n,n,n,n) - 放羊的星星bky - 博客园 (cnblogs.com)

示例：

以相同的速度从开始到结束的过渡效果：

div
{transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari 和 Chrome 和 Edge */
-o-transition-timing-function: linear; /* Opera */
}

参考：CSS transition 属性 (w3school.com.cn)

CSS translation相关推荐

校招社招必备核心前端面试问题与详细解答
本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案.网易阿里腾讯校招社招必备知识点. 原理讲解参考:前端增长-重新定义大前端在线课程:网易云课堂课程思否课堂官方博 ...
浏览器渲染流水线解析
摘要: 若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流 ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
关于IOS设备window onscroll滚动条滚动事件不触发的问题
http://blog.hooperui.com/%E5%85%B3%E4%BA%8Eios%E8%AE%BE%E5%A4%87window-onscroll%E6%BB%9A%E5%8A%A8%E6 ...
css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
figma下载 I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they ...
CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
前言现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...
html 动画过度转换的用法,css（动画，过渡，转换）
@keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性以百分比来规定改变发生的时间,或者通过关键词"from"和"to" ...
css手机圆角毛刺_CSS毛刺效果
css手机圆角毛刺 View demo 查看演示Download Source 下载源 Today we'd like to show you how to create a little exper ...

CSS translation

文章目录

1、浏览器支持

2、定义和用法

3、语法

4、transition-delay 属性

5、transition-duration 属性

6、transition-property 属性

7、transition-timing-function 属性

CSS translation相关推荐

最新文章

热门文章