19、前端开发：CSS知识总结—

1、前言

transition 属性设置元素当过渡效果，四个简写属性为：

transition-property 指定CSS属性的name，transition效果
transition-duration 指定过渡效果的持续时间
transition-timing-function 过度的时序函数
transition-delay 过渡效果延迟，等一段时间后再执行

2、transition-property 用法

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>半壁为璜(runoob.com)</title> <style> div{width:100px;height:100px;background:red;transition-property: width;transition-duration: 2s;-webkit-transition-property: width; /* Safari */-webkit-transition-duration: 2s; /* Safari */}div:hover{width:300px;}</style></head><body><p><b>注意:</b> 该属性不兼容 IE9以及更早版本的浏览器.</p><div></div><p>鼠标移动在块上查看动画效果.</p></body></html>

3、transition-duration 用法

<style> div{width:100px;height:100px;background:red;transition-property:width;transition-duration:5s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:5s;}div:hover{width:300px;}
</style>

4、transition-timing-function用法

可选值

值	描述
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 之间的数值。

steps()分布执行过渡效果

可设置一个第二个值

end，在时间结束时执行过渡（默认值）

start，在时间开始时执行过渡

transition-timing-function：step(2,start);

5、transition-delay用法

<style> div{width:100px;height:100px;background:red;transition-property:width;transition-duration:5s;transition-delay:2s;/* Safari */-webkit-transition-property:width; -webkit-transition-duration:5s;-webkit-transition-delay:2s;}div:hover{width:300px;}
</style>

注意：

transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中的第一个是持续时间，第二个是延迟时间

19、前端开发：CSS知识总结——transition过渡属性相关推荐

Css 中的transition过渡属性
前端开发--CSS基础
快速生成css样式采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
前端开发核心知识进阶
课程内容开篇词:如何突破前端开发技术瓶颈日本后现代主义作家村上春树写过一本富有哲理的书--<当我谈跑步时我谈些什么>. 书中,他谈到,跑步跟写作一样:都需要坚毅隐忍,追逐超越:都需要心 ...
前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
三、前端开发-CSS
三.前端开发语言体系-CSS 文章目录三.前端开发语言体系-CSS CSS3 浏览器前缀流.元素与基本尺寸盒模型四大家族流的破坏与保护层叠规则文本处理元素显示与隐藏变形过渡动画 F ...
前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
前端开发基础知识整理--web综合篇
该篇是web综合部分,主要包含了HTML(HTML5).http.页面优化及其他一些概念性的问题 doctype是什么?标准模式与兼容模式各有什么区别? <!doctype>声明必须处于H ...
web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...

19、前端开发：CSS知识总结——transition过渡属性