博客
关于我
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/

你可能感兴趣的文章
cf 977e 思维 + dfs
查看>>
面试别慌!阿里专家带你从【入门+基础+进阶+项目】攻破SpringBoot
查看>>
【Java面试】30个 Java 集合面试必备的问题和答案
查看>>
干了八年的阿里面试官,给大家分享我面试时最爱问的Java面试题
查看>>
华为鸿蒙到底是不是安卓系统套了个壳?
查看>>
redis知识点学习
查看>>
vue出现sockjs-node/info?t=1462183700002 报错解决方案
查看>>
删除mongodb中已存在的用户
查看>>
分布式理论基础知识点入门
查看>>
SpringCloud之消息总线(Spring Cloud Bus)刷新配置
查看>>
多线程之创建线程的两种方式
查看>>
fragment中recyclerview的重新加载问题
查看>>
集合 List
查看>>
EffectiveC++条款23:宁以non-member,non-friend替换menber函数
查看>>
设计模式:可复用面向对象软件及基础:3-6 结构型模式:享元模式(FlyWeight)
查看>>
window程序设计(1):第一个windows程序
查看>>
windows程序设计(4):文本输出
查看>>
JZOJ7月5日提高组反思
查看>>
JZOJ7月20日提高组T2 昂贵的珍珠垂饰
查看>>
JZOJ7月27日提高组反思
查看>>