<!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. Fastbin attack

    Fastbin Attack 暂时接触到了两种针对堆分配机制中fastbin的攻击方式,double free和house of spirit Double free 基本原理 与uaf是对free之 ...

  2. Wannafly Camp 2020 Day 1F 乘法 - 字符串

    一开始想根据单调性双指针 后来血了才想起来负负得正 于是暴力二分答案即可 #include <bits/stdc++.h> using namespace std; #define int ...

  3. C语言-浮点数的秘密

    一.浮点数的秘密 1.内存中的浮点数 浮点数在内存中的存储方式为:符号位.指数.尾数 十进制浮点数的内存表示: 实例分析: #include <stdio.h> //打印十进制的内存表示 ...

  4. leetcode top-100-liked-questions刷题总结

    一.起因 宅在家中,不知该做点什么.没有很好的想法,自己一直想提升技能,语言基础自不必言,数据结构还算熟悉,算法能力一般.于是乎,就去刷一通题. 刷题平台有很多,我选择了在leetcode进行刷题.回 ...

  5. Python Turtle模块的简单应用

    时钟 import turtle as t import datetime as dt #画出背景 game = t.Screen() game.bgcolor("white") ...

  6. opensuse安装pycharm

    最近在学习python,所以查询了很多资料,大多都推荐pycharm进行pychon项目开发.于是查阅一些资料,整理出这个安装步骤.(仅供参考!!!仅供参考!!!仅供参考!!!) 仅供参考!!!仅供参 ...

  7. IDEA编写shell脚本并运行

    1.去官网下载IDEA开发工具 https://www.jetbrains.com/idea/ 2.打开IDEA并安装bashsupport插件 3.安装完插件重启IDEA 4.下载git工具 htt ...

  8. pikaqiu练习平台（SQL注入 ）

    sql注入漏洞 (危害是最大得) Sql注入 数据库注入漏洞,主要是开发人员在构建代码时,没有对输入边界进行安全考虑,导致攻击者可以通过合法的输入点提交一些精心构造的语句,从而欺骗后台数据库对其进行执 ...

  9. Android监听消息通知栏点击事件

    Android监听消息通知栏点击事件 使用BroadCastReceiver 1 新建一个NotificationClickReceiver 类,并且在清单文件中注册!! public class N ...

  10. HihoCoder 1174

    虽然没有西加加的语言来检验,我却写了西加加的…… 就是stl使用不太熟练 勉勉强强强行c++写的 就当练手 #include <iostream>#include <vector&g ...