CSS 过渡 | 您所在的位置:网站首页 › 苹果的过渡动画可以调整吗 › CSS 过渡 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
建站手册
网站构建
万维网联盟 (W3C)
浏览器信息
网站品质
语义网
职业规划
网站主机
关于 W3School
帮助 W3School
CSS 过渡
CSS 3D 转换
CSS 动画
CSS 过渡
CSS 过渡允许您在给定的时间内平滑地改变属性值。 请把鼠标移动到这个元素上,来查看 CSS 过渡效果: CSS在本章中,您将学习如下属性: transition transition-delay transition-duration transition-property transition-timing-function 对过渡的浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。 属性 Chrome IE Firefox Safari Opera transition 26.0 10.0 16.0 6.1 12.1 transition-delay 26.0 10.0 16.0 6.1 12.1 transition-duration 26.0 10.0 16.0 6.1 12.1 transition-property 26.0 10.0 16.0 6.1 12.1 transition-timing-function 26.0 10.0 16.0 6.1 12.1 如何使用 CSS 过渡?如需创建过渡效果,必须明确两件事: 您要添加效果的 CSS 属性 效果的持续时间注意:如果未规定持续时间部分,则过渡不会有效果,因为默认值为 0。 下面的例子展示了 100px * 100px 的红色 元素。 元素还为 width 属性指定了过渡效果,持续时间为 2 秒: 实例 div { width: 100px; height: 100px; background: red; transition: width 2s; }当指定的 CSS 属性(width)值发生变化时,将开始过渡效果。 现在,让我们为 width 属性指定一个鼠标悬停在 元素上时的新值: 实例 div:hover { width: 300px; }亲自试一试 请注意,当光标从元素上移开时,它将逐渐变回其原始样式。 改变若干属性值下面的例子为 width 和 height 属性都添加了过渡效果,width 是 2 秒,height 是 4 秒: 实例 div { transition: width 2s, height 4s; }亲自试一试 指定过渡的速度曲线transition-timing-function 属性规定过渡效果的速度曲线。 transition-timing-function 属性可接受以下值: ease - 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认) linear - 规定从开始到结束具有相同速度的过渡效果 ease-in -规定缓慢开始的过渡效果 ease-out - 规定缓慢结束的过渡效果 ease-in-out - 规定开始和结束较慢的过渡效果 cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值下面的例子展示了可以使用的一些不同的速度曲线: 实例 #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;}亲自试一试 延迟过渡效果transition-delay 属性规定过渡效果的延迟(以秒计)。 下例在启动之前有 1 秒的延迟: 实例 div { transition-delay: 1s; }亲自试一试 过渡 + 转换下例为转换添加过渡效果: 实例 div { transition: width 2s, height 2s, transform 2s; }亲自试一试 更多过渡实例您可以可以一一指定 CSS 过渡属性,如下所示: 实例 div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }亲自试一试 或使用简写的 transition 属性: 实例 div { transition: width 2s linear 1s; }亲自试一试 CSS 过渡属性下表列出了所有 CSS 过渡属性: 属性 描述 transition 简写属性,用于将四个过渡属性设置为单一属性。 transition-delay 规定过渡效果的延迟(以秒计)。 transition-duration 规定过渡效果要持续多少秒或毫秒。 transition-property 规定过渡效果所针对的 CSS 属性的名称。 transition-timing-function 规定过渡效果的速度曲线。 CSS 3D 转换 CSS 动画 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
CopyRight 2018-2019 实验室设备网 版权所有 |