Transitions功能的使用方法

Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能
用法如下：

transition：property duration timing-function

property表示对哪个属性进行平滑过渡
duration表示在多久时间内完成属性值的平滑过渡
timing-function表示通过什么方法进行平滑过渡

举例：

<style>div {background-color: #ffff00;transition: background-color 1s linear;}div:hover {background-color: #00ffff;}
</style>
<body><div>实例</div>
</body>

鼠标没移上div之前

鼠标移上div之后，颜色是在1s时间内平滑渐变的

除了上述三个属性外，transitions还有第四个参数，第四个参数的属性名为transition-delay,该属性指定变换动画特效延迟多久后执行，也就是延迟多少秒后才执行动画效果

transition： background-color 1s linear 2s

延迟2秒后执行

此外，Transitions还可以同时平滑过渡多个属性值

<style>div {background-color: #ffff00;color: #000000;width: 300px;transition: background-color 1s linear,color 1s linear,width 1s linear;}div:hover {background-color: #003366;color: #ffffff;width: 400px;}
</style>
<body><div>实例</div>
</body>

前：

后：（宽度改变了。。剪切出来的图不明显，读者可以自行测试）

Transitions的动画功能相关推荐

组态王图素制作_组态王的图形及动画功能
组态王工具箱中的基本图素:直线.扇形.填充图形(封闭图形,内部可填充色彩,有:椭圆和圆角矩形).折线.管道.多边形.文本.按钮和点位图,它们均具有图形及动画功能.它们中填充图形类动画连接框如图1所表示 ...
android 自定义对号,Android自定义View实现打钩动画功能
先上效果图动图静态图 1. 回顾 [Android自定义View:一个精致的打钩小动画]上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码, ...
paraview高级动画功能
下面通过一些实例展示一下paraview的高级动画功能,下面演示的实例来自paraview自带的算例,位置如下图所示: 1 .熟悉动画视图(Animation View) 打开can.ex2,选中所有 ...
使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
android爬楼梯动画,[转载]利用PPT的自定义动画功能制作爬楼梯的动态效果
利用PPT的自定义动画功能制作爬楼梯的动态效果职场中,PPT报告总是少不了的,如何能让PPT与众不同.华丽而不失分寸呢?PPT中的自定义动画是一个不错的选择.我很喜欢逛一些PPT,有时看见不错的动画 ...
python模拟足球射门_使用PyQt5的动画功能实现足球射门效果
QT作为一个全面的桌面应用程序开发包,其自然提供了对图像的动画支持.本篇文章中,就来简单地在PYQt5中使用Animation动画功能实现一个足球射门的动画效果. 本篇将会依次完成以下功能: 在GUI ...
如何在Unity5.0 下实现贴图材质的Animation动画功能
在太空射击游戏中,需要制作一个火星背景图片,为动态的太空星空背景:如何用unity5自带的Animation实现此动画功能为关键: 实现步骤如下: 1, 首先产生一个plane作为火星背景: 2,新 ...
Starling 动画功能
动画动画是所有游戏的必要组成部分,Starling能帮助你快速的制作简单动画. 如果你想了解一下,那么这里有两种动画类型.其中一种动画是你知道即将发生什么,比如当消息提示框被关闭,或者某些界面元素被 ...
Cocos骨骼动画功能解密
在游戏中,人物的各种动作是必不可少,一般实现人物动作的方式有两种,序列帧动画或骨骼动画.Cocos在更新到2.x版本之后,便没有了骨骼动画的功能,使得开发者非常困扰.终于在本次更新中,Cocos编辑器 ...

Transitions的动画功能

Transitions功能的使用方法

Transitions的动画功能相关推荐

最新文章

热门文章