过渡 - transition 是变形transfrom其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果。

实例1:

	<div class="box"></div>
<p>鼠标移动到 .box 元素上,查看过渡效果。</p>
.box{
width: 100px;
height: 100px;
background: red;
margin: 0 auto; transition-duration: 1s; /*花费时间*/
transition-property: all;
transition-delay:0s; /* 延迟 */
transition-timing-function: linear; /*匀速*/
}
.box:hover{
width:200px;
background: #00FFFF;
}

效果图:



注:当指针移出元素时,它会逐渐变回原来的样式。

实例2:

在例子中使用所有过渡属性 - 使用简写

.box{
.box{
width: 100px;
height: 100px;
background: red;
margin: 0 auto; transition:1s all 0s linear;
}

效果图还是这样:

下面是我的简单总结

总:

transition:2s all;

transition:2s 1s all linear;

注:1s是延迟 linear过渡的属性

分开写:

1.transition:2s; 给它本身+这个过渡的属性:所需时间

2.transition-timing-function:linear; 匀速

5.transition: -delay timing-function -duration;

transition-timing-function 属性

描述
linear 匀速
ease 慢快慢
ease-in 慢开始
ease-out 慢结束
ease-in-out 慢开始和结束
  参考文章:

runoob

过渡 - transition的更多相关文章

  1. 深入理解CSS过渡transition

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

  2. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  3. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  4. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  5. css过渡transition

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

  6. css过渡transition属性

    一.CSS3 过渡 (一).CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 实现过渡效果的两个要件: 规定把效果添加到哪个 CSS 属性上 规定效果的时长 定义动画的规则 过渡 ...

  7. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  8. 深入css过渡transition

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

  9. css3过渡transition

    过渡:transition transition:transition-property/duration/timing-function/delay的缩写. transition : <'tr ...

随机推荐

  1. 清缓存的姿势不对,真的会出生产bug哦

    最近解决了一个生产bug,bug的原因很简单,就是清理缓存的方式不对.本来没啥好说的,但是考虑到我们有时候确实会在一些小问题上栽跟头,最终决定把这个小故事拿出来跟大家分享下. 风起有一天在撸代码,突然 ...

  2. Redis|Sentinel 高可用架构

    一 前言 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端 ...

  3. 什么是W3C??

    为什么想着写这个博客呢,因为最近准备简历去面试,看到好多公司上面都写着熟悉 w3c ,很纳闷,我是一个新手,w3c是什么呢?没听过!!! 所以就去网上查了: 什么是W3C? W3C 万维网联盟(wor ...

  4. 关于GIS中Scale和Resolution的那些事儿

    在ArcMap或各类前端地图框架(Leaflet.js.OpenLayers.js.ArcGIS Javascript等)中都需要加载WMTS或ArcGIS Rest服务,但所有的地图显示的原理基本上 ...

  5. 2019年 iPad无法充电

    2019年 iPad无法充电  到售后网点检测没毛病,可能是apple产品做了低温保护逻辑机制低温无法充电,或者说是冬天温度跟iPad电池充电温度要求不符.各位有遇到情况的可以看看是不是这种问题,这问 ...

  6. CSS3开启硬件加速

    { transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...

  7. JAVA 获取时间段内的每一天

    public class day { public static void main(String[] args) { // TODO Auto-generated method stub Strin ...

  8. CentOS -- Zookeeper installation and configure

    1 JDK 1.8 must installed first 2 Get Zookeeper package wget https://archive.apache.org/dist/zookeepe ...

  9. C#开发BIMFACE系列18 服务端API之获取模型数据3:获取构件属性

    系列目录     [已更新最新开发文章,点击查看详细] 本篇主要介绍如何获取单文件/模型下单个构建的属性信息. 请求地址:GET https://api.bimface.com/data/v2/fil ...

  10. codeforces 876 F. High Cry(思维)

    题目链接:http://codeforces.com/contest/876/problem/F 题解:一道简单的思维题,知道最多一共有n*(n+1)/2种组合,不用直接找答案直接用总的组合数减去不符 ...