css动画效果之transition（动画过渡效果属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- transition:动画过渡效果属性
功能：使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标
点击、划过、获取焦点或对元素任何改变中触发，并圆滑的以动画效果改变css属性值。 可定义的属性有：
transition-property：设置那些属性进行过渡，all：所有属性
transition-duration：完成过渡动画效果的时间，默认是0
transition-timing-function：设置动画的缓动效果，默认是ease（逐渐变慢）。
（其他常用值：ease-in，加速；ease-out，减速；ease-in-out，加速然后减速)
transition-delay：设置动画开始的延迟时间，默认是0 示例：
使用transition，实现过渡动画。一个红色的正方形，当鼠标移入该区域后，红色正方形放大一倍，并且颜色变为灰色。鼠标移开，还原到初始状态。 --> <style>
.box{
width: 100px;
height: 100px;
margin:50px auto;
background-color: #f00;
/* 为离开的动作也添加过渡效果 */
transition: all 1s ease-in 1s;
}
.box:hover{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: #666;
/* transition-property:width,height,border-radius;
transition-duration: 1s;
transition-timing-function:ease-in;
transition-delay:1s; */
transition: all 1s ease-in 1s;
} </style>
<body>
<div class="box"></div>
</body>
</html>
Document
css动画效果之transition（动画过渡效果属性）的更多相关文章
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
- css动画效果之transition（动画效果属性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3动画效果之transition
CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标
1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...
随机推荐
- 解决shell 报错：syntax error: unexpected end of file
debug shell:执行 sh -x test.sh vi test.sh :set fileformat=unix :wq解决问题原因是我在windows pycharm 写的格式不符合uni ...
- C#接口与抽象类学习笔记
本笔记摘抄自:https://www.cnblogs.com/solan/archive/2012/08/01/CSharp06.html,记录一下学习过程以备后续查用. 摘要: 抽象类:是一种特殊的 ...
- Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】
本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; ...
- [SNOI2017]炸弹[线段树优化建图]
[SNOI2017]炸弹 线段树优化建图,然后跑一边tarjan把点全部缩起来,炸一次肯定是有连锁反应的所以整个连通块都一样-于是就可以发现有些是只有单向边的不能忘记更新,没了. #include & ...
- Wormholes POJ - 3259 spfa判断负环
//判断负环 dist初始化为正无穷 //正环 负无穷 #include<iostream> #include<cstring> #include<queue> # ...
- SQLyog怎么导入mysql数据库
参考链接:https://jingyan.baidu.com/article/647f0115c5ad9f7f2148a8c6.html
- 机器学习笔记（十一）OCR技术的应用
1.介绍OCR: OCR(Photo optical character recognition 照片光学字符识别) 应用于读取电子照片中的文字. 2.算法思路: ① 识别文字区域: ② 字符切分: ...
- centos7下top free vmstat 命令详情
top:https://www.cnblogs.com/makelu/p/11169270.html
- Spring-session+Redis解决Session共享
1. 保证Redis启动 2. 导入依赖 SpringBoot+Spring-Session+Redis <!--spring boot 与re ...
- Intellij IDEA史上最全快捷键大全
古人有云:工欲善其事,必先利其器,要是只是手握利器,而不能发挥其最大的效益,那无异于赤手空拳,对敌对垒. 那古人所云,未得其精髓,只能为碎语闲言尔. 自动代码 常用的有fori/sout/psvm+T ...