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. linux安装nvm node版本管理器 nvm常用命令 部署node服务器环境

    1,nvm git地址点击打开链接,安装命令 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh ...

  2. 看板记录工具wekan

    wekan 1. 功能 看板工具 2. 安装 环境: centos7.4 安装链接 snap方式 安装脚本(root用户) #!/bin/bash yum makecache fast yum ins ...

  3. Arthas

    Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱 下载&启动 wget https://alibaba.github.io/arthas/arthas-boot.jar 启 ...

  4. 设计一下类似SpringIoC的注入工具~Lind.DI

    通过注解(特性)的方式进行对象的注册与注入,方便,灵活! 本篇主要讲如何去实现,下一篇主要讲如何把它集成到mvc和api环境里,实现自动的注入! spring ioc工作的过程大致为,统一的注册组件, ...

  5. 《k8s-1.13版本源码分析》-抢占调度

    源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...

  6. Android8.0通知

    android里面经常会使用Notification来显示通知的消息,一般使用NotificationManager来创建通知消息 NotificationManager manger = (Noti ...

  7. 随笔:WPS居然!出了!Mac版!

    震惊! WPS! 居然! 出了! Mac版! 刚刚,我打算改一个word文档,打开了我的WIN10虚拟机,然而由于这个win10是前两天重装的,上面并没有word和wps. 当我打开wps官网的时候, ...

  8. Excel日期中那个著名的bug

    一个软件中的bug能够持续多久?答案不一,大多数bug在软件测试阶段就已经被干掉,又有许多死在Preview阶段,抑或正式上线后不久被干掉,有些则伴随软件终生,直到下一代产品发布才寿终正寝,而Exce ...

  9. MVC添加Area出现“到多个与名为“Home”的控制器匹配的类型的解决方法”

    新建MVC项目,添加HomeController,然后添加名字为Admin的Area后,新建HomeController.这个时候,运行项目会出现以下错误: 解决办法如下: 打开网址下面的HomeCo ...

  10. Linux 桌面玩家指南:01. 玩转 Linux 系统的方法论

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...