博客
关于我
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源码安装
查看>>
Mysql源码安装过程中可能碰到的问题
查看>>
MySQL灵魂16问,你能撑到第几问?
查看>>
MySQL灵魂拷问:36题带你面试通关
查看>>
mysql状态分析之show global status
查看>>
mysql状态查看 QPS/TPS/缓存命中率查看
查看>>
mysql生成树形数据_mysql 实现树形的遍历
查看>>
mysql用于检索的关键字_Mysql全文搜索match...against的用法
查看>>
MySQL用得好好的,为什么要转ES?
查看>>
MySql用户以及权限的管理。
查看>>
MySQL用户权限配置:精细控制和远程访问的艺术!------文章最后有惊喜哦。
查看>>
mysql用户管理、常用语句、数据分备份恢复
查看>>
MySQL留疑问:left join时选on还是where?
查看>>
mysql登陆慢问题解决
查看>>
Mysql百万级数据查询优化
查看>>
MySQL的 DDL和DML和DQL的基本语法
查看>>
mysql的 if else , case when then, IFNULL
查看>>
MySQL的10种常用数据类型
查看>>
MySQL的btree索引和hash索引的区别
查看>>