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 ...
随机推荐
- 线段树（lazy标记）-- 模板
], lazy[MAXN << ]; void PushUp(int rt) { ans[rt] = ans[rt << ] + ans[rt << | ]; } ...
- python 轮询，长轮询
轮询相关 用于消息和投票等 轮询 1.采用js 定时请求. html <!DOCTYPE html> <html lang="zh-CN"> <hea ...
- Treats for the Cows POJ - 3186 dp 区间dp
//dp[i][j]表示第i次从左边取,第j次从右边取的价值,所以我们可以得到状态方程 //dp[i][j]=max(dp[i-1][j]+(i+j)*a[i],dp[i][j-1]+(i+j)*a[ ...
- shell输入输出
输出 一.echo命令介绍 1.功能:将内容输出到默认显示设备 2.语法:echo [-ne] [字符串] :输出的字符串以空格隔开,默认会加上换行符 3.选项 -n 不要在最后自动换行 -e 如果字 ...
- 数据预处理 | python 第三方库 imblearn 处理样本分布不均衡问题
说明:目前 只记录了 过采样 和 欠采样 的代码部分 1 样本分布不均衡描述: 主要出现在与分类相关的建模问题上,不均衡指的是不同类别的样本量差异非常大. 样本量差距过大会影响到建模结果 2 出现的场 ...
- 微信小程序期末复习
过什么六一,复习不完了... 第1章作业 一.单选题(共10题,100.0分) 1以下哪个不是主流的手机操作系统? A.Android B.iOS C.Windows Phone D.Blackber ...
- ALSA lib-ext plugin
参考pcm_speex.c #include <stdio.h> #include <string.h> #include <unistd.h> #include ...
- 番外：Oracle 中关于 Control File 的备份说明
番外系列说明:该系列所有文章都将作为独立篇章进行知识点讲解,是对其他系列博文进行的补充说明,来自于博客园AskScuti. 主题:关于 Control File 控制文件备份的说明 内容预览:本篇涉及 ...
- SpringBoot--自动配置原理-4个注解
一.自动配置原理 四个元注解:修饰注解的注解 @Target(ElementType.TYPE) 这个注解用在那个位置上,可以使用在类上,方法上,成员变量上 @Retention(RetentionP ...
- 问题解决：局域网内，为啥别人ping不到我的IP
试着在本地搭建一个测试环境,成功后却发现同一局域网的同事根本访问不了,他们ping不到我的IP,这可咋整! 询问度娘后,我的问题得到了,以下是我的总结,如果解决不了你的问题,还请继续百度. 方法一:关 ...