CSS3学习手记（10）过渡

CSS3过渡

允许css的属性值在一定的时间内平滑地过渡
在鼠标单击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition

transition-property属性检索或设置对象中的参与过渡的属性

语法

transition-property:none|all|property

参数说明

none 没有属性改变
all 默认值
property 元素属性名

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}div:hover{cursor: pointer;background: red;transition-property:background }</style>    </head><body><div></div></body>
</html>

鼠标经过方块变红，离开后恢复正常

transition-duration属性检索设置对象过渡的持续时间

语法

transition-duration:time;

参数说明

规定完成过渡效果需要花费的时间（以秒或毫秒计）
默认值是0

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }</style>    </head><body><div></div></body>
</html>

transition-timing-function 检索或设置对象中过渡的动画类型

linear 线性过渡
ease 平滑过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快在到慢
step-start
step-end

transition-delay属性检索或设置对象延迟过渡的时间

语法 transition-delay:time

参数说明

指定秒或毫秒之前要等待切换效果开始
默认值 0

转载于:https://www.cnblogs.com/zry2510/p/7084811.html

CSS3学习手记（10）过渡相关推荐

CSS3学习手记（1）选择器
基本选择器通配符选择器元素选择器类选择器 ID选择器后代选择器 <!DOCTYPE html> <html><head><meta charset=& ...
uni-app官方教程学习手记
本人微信公众号:前端修炼之路,欢迎关注背景介绍大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
ADPRL - 近似动态规划和强化学习 - Note 10 - 蒙特卡洛法和时序差分学习及其实例（Monte Carlo and Temporal Difference）
Note 10 蒙特卡洛法和时序差分学习 Monte Carlo and Temporal Difference 蒙特卡洛法和时序差分学习 Note 10 蒙特卡洛法和时序差分学习 Monte Car ...
AM335X的汇编语言与c语言,X86汇编语言学习手记 -- 汇编和C协同
X86汇编语言学习手记(3) 2004年12月在X86汇编语言学习手记(1)(2)中,可以看到栈(Stack)作为进程执行过程中数据的临时存储区域,通常包含如下几类数据: 局部变量函数调用的返回地 ...
分享Silverlight/WPF/Windows Phone一周学习导读(10月16日-10月22日)
分享Silverlight/WPF/Windows Phone一周学习导读(10月16日-10月22日) 本周Silverlight学习资源更新 Silverlight:分包下载及SEO优化方案菩提 ...
ROS学习手记 - 5 理解ROS中的基本概念_Services and Parameters
ROS学习手记 - 5 理解ROS中的基本概念_Services and Parameters 上一节完成了对nodes, Topic的理解,再深入一步: Services and Parameter ...

CSS3学习手记（10）过渡

CSS3过渡

transition

transition-timing-function 检索或设置对象中过渡的动画类型

transition-delay属性检索或设置对象延迟过渡的时间

CSS3学习手记（10）过渡相关推荐

最新文章

热门文章

CSS3学习手记（10） 过渡

CSS3过渡

transition

transition-timing-function 检索或设置对象中过渡的动画类型

transition-delay属性检索或设置对象延迟过渡的时间

CSS3学习手记（10） 过渡相关推荐

最新文章

热门文章

CSS3学习手记（10）过渡

CSS3学习手记（10）过渡相关推荐