<!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（动画过渡效果属性）的更多相关文章

  1. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  2. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  3. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

  4. css动画效果之transition（动画效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. CSS3动画效果之transition

    CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...

  7. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  8. 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 ...

  9. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

随机推荐

  1. css权重及计算

    一.一般而言:!important--->行间样式--->id--->class | 属性--->标签选择器--->通配符 二.权重值 !important        ...

  2. Python通过paramiko批量远程主机执行命令

    一.前言 在日常运维的过程中,经常需要登录主机去执行一些命令,有时候需要登录一批主机执行相同的命,手动登录执行的化效率太慢, 所以可以通过Python的paramiko模块批量执行,本篇文章基于pyt ...

  3. xlrd模块-读取Execl表格

    #xlrd模块 读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读e ...

  4. jQuery---音乐导航

    音乐导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. jQuery---淘宝精品案例

    淘宝精品案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  6. Excel如何快速选定所需数据区域

    在使用Excel处理数据时,快速选定所需数据区域的一些小技巧. 第一种方法:(选定指定区域) Ctrl+G调出定位对话框,在[引用位置]处输入A1:E5000,点击[确定]即可.  第二种方法:(选定 ...

  7. 多模块打war包

    1．在启动类的那个模块中的pom.xml中加入<packaging>war</packaging>  就这句 <groupId>com.mybatis</gr ...

  8. Redis 数据总结（1 数据导入）

    理论基础部分:http://www.redis.cn/topics/mass-insert.html 几百上千万的数据建议使用pipe来完成导入. 1.windows 下数据导入命令: type ou ...

  9. vm virtualbox 里的ubuntu挂载windows的文件夹

    1.先在virtualbox里设置好共享文件夹 如右图所示: 共享文件夹-添加共享文件夹 里面: 选择好 共享文件夹路径,起好 共享文件夹名称,下面都不用选. 假设共享文件名是ShareD, 2. 然 ...

  10. Python里的Flask开发环境的搭建

    在已经安装好了Python后,我这里用的是Python3.5,准备进一步学习Flask框架,下面记录搭建Flask环境 这里使用了虚拟环境,在虚拟环境里,最小化的安装Flask. 参考步骤: 1.首先 ...