一、CSS3 过渡

（一）、CSS3过渡简介

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

实现过渡效果的两个要件：

  • 规定把效果添加到哪个 CSS 属性上
  • 规定效果的时长

定义动画的规则

过渡transition  （作用） 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

（二）、transition属性

   语法 ：   {transition： 属性名 持续时间 过渡方法 }

transition-timing-function  属性取值

示例：

利用transition设置过渡的实例

<!doctype html>

<html>

<head>

<title></title>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

}

div:hover

{

width:600px;

height:600px;

text-align: center;

line-height:100px;

background:url(1.jpg);

background-position:top;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div>kaka</div>

</body>

</html>

从一个正方体

过渡到一个背景图片

css过渡transition属性的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. css过渡transition

    定义 过渡transition是一个复合属性,包括transition-property.transition-duration.transition-timing-function.transiti ...

  3. 深入css过渡transition

    通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方. 过渡transitio ...

  4. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  5. css的transition 属性

    把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: div { width:100px; transition: width 2s; -moz-transition: wi ...

  6. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  7. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  8. 我想学前端动画-CSS之transition

    Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...

  9. Vue css过渡 和 js 钩子过渡

    css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...

随机推荐

  1. 配置文件my.cnf---配置信息注释大全

    在进行MySQL与CM+CHD之间的应用配置时,发现此前对于MySQL的配置含义过于模糊,所以将CM+CHD集群所涉及MySQL方面的配置含义进行抽取并加以注释,方便此后的配置和使用. 一.客户端设置 ...

  2. 常见MySQL数据库语句

    ##############Author: Fan ################# (1)数据库    # 查看所有的数据库    SHOW DATABASES ;    # 创建一个数据库   ...

  3. Eclipse利用Maven快速上手搭建MyBatis

    一.what is maven? Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven 除了以程序构建能力为特色之外,还提供高级项目管理 ...

  4. [Note] 使用Code Snippet简化编码

    使用NewtonSoft.Json写实体类时大量格式一致的代码出现 ,这时可以使用Code snippet来加快编码速度 [JsonProperty(PropertyName = "mess ...

  5. Java 学习笔记之 Stop停止线程

    Stop停止线程: 使用stop()方法停止线程是非常暴力的,会抛出java.lang.ThreadDeath Error,但是我们无需显示捕捉, 以下捕捉只是为了看得更清晰. public clas ...

  6. Flume 学习笔记之 Flume NG高可用集群搭建

    Flume NG高可用集群搭建: 架构总图: 架构分配: 角色 Host 端口 agent1 hadoop3 52020 collector1 hadoop1 52020 collector2 had ...

  7. 大头儿子和小头爸爸的战斗--java字符和字符串

    故事背景 一座普普通通的小屋里,住着大头儿子.小头爸爸和围裙妈妈.在他们普普通通的生活中,总是响起充满欢乐的笑声.最温暖的家又成了他们每个人的爱的源泉. <大头儿子和小头爸爸>是孩子居首( ...

  8. Embarrassment

    I don't know what I did wrong, why do I take care of me? I did something wrong before, your parents ...

  9. windows系统安全日志取证工具

    0x01 关于日志 Windows安全事件日志中详细记录了是谁在什么时候通过什么手段登录到系统或者注销了登录,通过分析该日志可以详细了解服务器的安全情况以及必要时的取证工作. 0x02 查看日志 传统 ...

  10. springboot Jar包 部署到Linux服务器运行脚本

    1.jar包同级目录 , 如下: #!/bin/sh RESOURCE_NAME=demo.jar tpid=`ps -ef|grep $RESOURCE_NAME|grep -v grep|grep ...