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 ...
随机推荐
- css权重及计算
一.一般而言:!important--->行间样式--->id--->class | 属性--->标签选择器--->通配符 二.权重值 !important ...
- Python通过paramiko批量远程主机执行命令
一.前言 在日常运维的过程中,经常需要登录主机去执行一些命令,有时候需要登录一批主机执行相同的命,手动登录执行的化效率太慢, 所以可以通过Python的paramiko模块批量执行,本篇文章基于pyt ...
- xlrd模块-读取Execl表格
#xlrd模块 读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读e ...
- jQuery---音乐导航
音乐导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jQuery---淘宝精品案例
淘宝精品案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- Excel如何快速选定所需数据区域
在使用Excel处理数据时,快速选定所需数据区域的一些小技巧. 第一种方法:(选定指定区域) Ctrl+G调出定位对话框,在[引用位置]处输入A1:E5000,点击[确定]即可. 第二种方法:(选定 ...
- 多模块打war包
1.在启动类的那个模块中的pom.xml中加入<packaging>war</packaging> 就这句 <groupId>com.mybatis</gr ...
- Redis 数据总结(1 数据导入)
理论基础部分:http://www.redis.cn/topics/mass-insert.html 几百上千万的数据建议使用pipe来完成导入. 1.windows 下数据导入命令: type ou ...
- vm virtualbox 里的ubuntu挂载windows的文件夹
1.先在virtualbox里设置好共享文件夹 如右图所示: 共享文件夹-添加共享文件夹 里面: 选择好 共享文件夹路径,起好 共享文件夹名称,下面都不用选. 假设共享文件名是ShareD, 2. 然 ...
- Python里的Flask开发环境的搭建
在已经安装好了Python后,我这里用的是Python3.5,准备进一步学习Flask框架,下面记录搭建Flask环境 这里使用了虚拟环境,在虚拟环境里,最小化的安装Flask. 参考步骤: 1.首先 ...