translation:过渡

举个栗子:transition: width 1s linear;

transition有三个属性,分别是transition-property, transition-duration,transition-timing-function.

因此上面的代码等价于

  transition-property: width; 指定要被过渡(改变)的属性

  transition-duration: 1s; 过渡所需时间

  transition-timing-function: linear; 过渡所用方法

补充一下: timing也叫做easing,意思是“缓动”。过渡所用方法可以有很多种,也可以自定义方法,具体百度搜索相关工具~

transition可以指定过渡多个属性,逗号隔开。

还要一个额外属性是 transition-delay:秒数; 用于规定动画执行前延迟的时长。

举个栗子

H5与C3权威指南笔记--transition动画的更多相关文章

  1. h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  2. h5与c3权威指南笔记--css3新属性选择器

    [att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: r ...

  3. H5与C3权威指南笔记--box-shadow

    box-shadow 用于给盒子添加阴影效果.IE9+ 举个栗子:box-shadow: inset 5px 5px 5px red; inset可选,该值会让阴影出现在盒子内部. 第一个5px是阴影 ...

  4. Struts2权威指南笔记

    Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...

  5. javascript权威指南笔记

    最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...

  6. HTTP权威指南笔记-1.概述

    1.1 通讯 Web内容是存储在服务器上的,Web服务所使用的是HTTP协议,所以经常称为HTTP服务器.通讯过程为客户端(正常我们所使用的)发出请求,服务端根据客户端的HTTP请求响应相应数据,这就 ...

  7. css 权威指南笔记(一)

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  8. vue权威指南笔记02——对比v-if与v-show

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Android编程权威指南笔记3:Android Fragment讲解与Android Studio中的依赖关系,如何添加依赖关系

    Android Fragment 当我在学习时,了解了Fragment词汇 Fragment是一种控制器对象,我就把所了解的简单说一下.activity可以派fragment完成一些任务,就是管理用户 ...

随机推荐

  1. len(x) 击败 x.len(),从内置函数看 Python 的设计思想

    内置函数是 Python 的一大特色,用极简的语法实现很多常用的操作. 它们预先定义在内置命名空间中,开箱即用,所见即所得.Python 被公认是一种新手友好型的语言,这种说法能够成立,内置函数在其中 ...

  2. bind、call和apply对比和使用

    最开始关于call.apply.bind函数的使用时,总是很模糊,不知道用哪一个,this指向问题等,看了一些别人的总结后有了一定的理解,所以特地记录一下: 要搞清楚call.apply.bind我们 ...

  3. NET微信公众号开发环境搭建(一)-了解微信由来

    公众号的应用,开发及调试环境搭建 花生壳要注册 需要二十多块钱 ,还要实名认证,估计要一两天才能审核通过  主要就是在 windows搭建测试环境   1.微信的应用场景   360百科微信简介 ht ...

  4. java多线程 生产者和消费者 lock

    package com.atguigu.thread.lock; import java.util.concurrent.locks.Condition; import java.util.concu ...

  5. SQL - Order By如何处理NULL

    问题来了.执行SQL语句 SELECT * FROM tbl ORDER BY x, y 如果用来排序的列x.y当中有NULL值,那么它们的顺序是怎样的呢? 不同的数据库有不同的答案,目前的主流数据库 ...

  6. Exp5 Msf基础应用 20164312 马孝涛

    1.本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击,如ms11_ ...

  7. Storm入门(九)Storm常见模式之流聚合

    流聚合(stream join)是指将具有共同元组(tuple)字段的数据流(两个或者多个)聚合形成一个新的数据流的过程. 从定义上看,流聚合和SQL中表的聚合(table join)很像,但是二者有 ...

  8. [题解] 2038: [2009国家集训队]小Z的袜子(hose)

    莫队,卡常数 题目地址 思路 设\(\text{Vis[i]}\)为元素\(\text{i}\)在区间\(\text{[L,R]}\)的出现次数 考虑区间\(\text{[L,R]}\)和元素\(\t ...

  9. 【RL-TCPnet网络教程】第41章 HTTP超文本传输协议基础知识

    第41章      HTTP超文本传输协议基础知识 本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习. ...

  10. Android 开发学习资源汇总

    下面这些资源对Android开发来说是很有帮助的! 1. 在线代码运行工具 地址:https://tool.lu/coderunner/ 说明:此工具站能在线运行C.C++.Java,基本能满足相关基 ...