博客
关于我
CSS过渡动画之transition
阅读量:465 次
发布时间:2019-03-06

本文共 693 字,大约阅读时间需要 2 分钟。

O(∩_∩)O~

这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。

CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。

 

概述

看一段比较学术的定义:transition主要负责页面的过渡效果,transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发,并平滑地以动画效果改变css的属性值。

 

transition的几个常用属性

1.transition-property:设置哪些属性进行过渡。

2.transition-duration:完成过渡动画需要的时间,默认为零。

3.transition-timing-function:设置动画的缓冲效果,默认是ease(逐渐变慢)。其他常用的几个值有ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)。

4.transition-delay:设置动画开始的延迟时间,默认是零。

ps:实际应用中,可以将四个属性简写到一条指令:transition:property duration timing-function delay; 实际就是把四个属性合到一块儿,中间用空格隔开。

 

实例

使用transition,实现一个过渡效果,一个红色的正方形,当鼠标进入该区域时,红色正方形放大一倍,同时变成绿色的圆形。鼠标离开,还原到初始状态。

 

1  2  3  4     
5 css的transition属性 6 7 29 30
31 32

 

转载地址:http://uchbz.baihongyu.com/

你可能感兴趣的文章
OpenCV透视校正perspective correction的实例(附完整代码)
查看>>
OpenCV平面跟踪planar tracking的实例(附完整代码)
查看>>
VTK:AnimateActors动画演员
查看>>
VTK:数据结构之BuildOctree
查看>>
VTK:数据结构之OctreeClosestPoint
查看>>
VTK:开发MultipleInputPorts实例
查看>>
XML
查看>>
青岛发文:3年将在全市全面实施电子劳动合同和电子集体合同
查看>>
48.9%的企业会在人力资源场景中使用电子签约,君子签为HR赋能增效
查看>>
‘yyyy-MM-dd HH:MM:SS’格式的字符串转日期vue
查看>>
解决烦人的eslint
查看>>
Spring事务管理
查看>>
SpringBoot之新手注意
查看>>
Tomcat详解
查看>>
QT网络编程(2):QWebSocket
查看>>
QT踩坑之数据量大时无法一次性打印
查看>>
Qt编写的小软件:一个dom方式操作的xml文件编辑器
查看>>
转:Qt信号槽的一些事
查看>>
QT动画框架:属性动画
查看>>
泛型算法:查找初始最长有序子序列算法is_sorted_until()
查看>>