博客
关于我
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之索引选择及优化
查看>>
mysql之联合查询UNION
查看>>
mysql之连接查询,多表连接
查看>>
mysql乐观锁总结和实践 - 青葱岁月 - ITeye博客
查看>>
mysql也能注册到eureka_SpringCloud如何向Eureka中进行注册微服务-百度经验
查看>>
mysql乱码
查看>>
Mysql事务。开启事务、脏读、不可重复读、幻读、隔离级别
查看>>
MySQL事务与锁详解
查看>>
MySQL事务原理以及MVCC详解
查看>>
MySQL事务及其特性与锁机制
查看>>
mysql事务理解
查看>>
MySQL事务详解结合MVCC机制的理解
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
webpack css文件处理
查看>>
mysql二进制包安装和遇到的问题
查看>>
MySql二进制日志的应用及恢復
查看>>
mysql互换表中两列数据方法
查看>>
mysql五补充部分:SQL逻辑查询语句执行顺序
查看>>
mysql交互式连接&非交互式连接
查看>>