<!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. python3练习100题——051

    题目:学习使用按位与 & . 不会的知识点,查了一下按位运算. 按位运算符是把数字看作二进制来进行计算的. 运算符 描述 实例 & 按位与运算符:参与运算的两个值,如果两个相应位都为1 ...

  2. jQuery---内容复习

    内容复习 1. 操作样式 (5) 1.1 css操作 设置单个样式 设置多个样式 获取样式 css(name, value) :设置单个样式 css(obj):设置多个样式 css(name):获取样 ...

  3. H3C链路聚合

    以太网链路聚合通过将多条以太网物理链路捆绑在一起形成一条以太网逻辑链路,实现增加链路带宽的目的,同时这些捆绑在一起的链路通过相互动态备份,可以有效地提高链路的可靠性. 一.基本概念 1.聚合接口/聚合 ...

  4. Ionic 使用 NFC

    Ionic 使用 NFC 哎哟喂,因为项目需要使用 Ionic 调用手机 NFC 功能,踩了好多坑,真的是,不过终于不负众望拿到了id.现在就记录一下我的步骤和踩过的坑! 步骤 我装的Ionic可能是 ...

  5. mybatis一级缓存和二级缓存(三)

    缓存详细介绍,结果集展示 https://blog.csdn.net/u013036274/article/details/55815104   配置信息 http://www.pianshen.co ...

  6. MySQL 8.0.18 在 Windows Server 2019 上的安装（MSI）公开

    AskScuti MySQL : Windows Server 2019 安装 MySQL 8.0 温馨提示:为了展现我最“魅力”的一面,请用谷歌浏览器撩我.那个 IE 啊,我很无奈. 一切就绪,点我 ...

  7. 并查集-E - Wireless Network

    E - Wireless Network An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical t ...

  8. linux常用命令和字符串乱码

    top :动态实时显示cpu.内存.进程等使用情况(类似windows下的任务管理器) ps aux 查看所有进程 ps aux|grep java 查看java进程 kill -9 进程号 :强制杀 ...

  9. shell脚本编程学习笔记（一）

    一.脚本格式 vim shell.sh #!/bin/bash //声明脚本解释器,这个‘#’号不是注释,其余是注释 #Program: //程序内容说明 #History: //时间和作者 二.sh ...

  10. Centsos7 aria2

    wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/aria2.sh & ...