博客
关于我
CSS过渡动画之transition
阅读量:468 次
发布时间: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/

你可能感兴趣的文章
MySQL服务器安装(Linux)
查看>>
mysql服务器查询慢原因分析方法
查看>>
mysql服务无法启动的问题
查看>>
MySQL杂谈
查看>>
mysql权限
查看>>
mysql条件查询
查看>>
MySQL条件查询
查看>>
MySQL架构与SQL的执行流程_1
查看>>
MySQL架构与SQL的执行流程_2
查看>>
MySQL架构介绍
查看>>
MySQL架构优化
查看>>
mysql架构简介、及linux版的安装
查看>>
MySQL查看数据库相关信息
查看>>
MySQL查看表结构和表中数据
查看>>
MySQL查询优化:LIMIT 1避免全表扫描
查看>>
MySQL查询优化之索引
查看>>
mysql查询储存过程,函数,触发过程
查看>>
mysql查询总成绩的前3名学生信息
查看>>
mysql查询慢排查
查看>>
MySQL查询报错ERROR:No query specified
查看>>