分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

css3 动画属性transition

发布时间:2023-09-06 01:39责任编辑:董明明关键词:动画

transition

  • Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
  • Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
  • Safari 支持替代的 -webkit-transition 属性。

transition 属性是一个简写属性,用于设置四个过渡属性:

属性
transition-property规定设置过渡效果的 CSS 属性的名称
transition-duration规定完成过渡效果需要多少秒或毫秒
transition-timing-function规定速度效果的速度曲线,主要有linear:以相同速度开始至结束的过渡效果;ease:慢速开始,然后变快,然后慢速结束的过渡效果;ease-in:以慢速开始的过渡效果;ease-out:规定以慢速结束的过渡效果;ease-in-out:规定以慢速开始和结束的过渡效果;cubic-bezier(0.42,0,0.58,1):定义自己的值,在0和1之间;
transition-delay定义过渡效果何时开始

可简写为:transition: property duration timing-function delay;

例如:

<style> ???.box{ width: 200px; height: 200px; background: #00f; transition: width 1s linear; } ???.box:hover{ width: 800px; }</style><div class="box"></div>

css3 动画属性transition

原文地址:https://www.cnblogs.com/dxzg/p/8350506.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved