css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

一、transition-property: 比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果

二、transition-duration:

ransition-duration是用来指定元素 转换过程的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

三、transition-timing-function:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

  • 1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

  • 2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

  • 3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

  • 4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

  • 5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

  • 6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。
    所有值需在[0, 1]区域内,否则无效。

四、transition-delay:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),
其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。
参考网址A

CSS-3 Transition 的使用的更多相关文章

  1. CSS之transition(动画)

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

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

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

  3. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  4. 深入理解CSS过渡transition

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

  5. CSS之transition过渡练习

    代码: <!DOCTYPE html><html><head> <title>transition</title> <meta cha ...

  6. css中transition的使用以及:before:after的使用(小样式)

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

  7. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

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

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

  9. css笔记 - transition学习笔记(二)

    开始把7,8月份学的css整理一下 transition过渡 1. CSS transition transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果. 2. tran ...

  10. css 中 transition 需要注意的问题

    cubic-bezier 是 transition-timing-function 的值的一种. 四个参数的关系式如下(t 代表时间,取值范围 [0, 1]):P0(1-t)3 + 3P1t(1-t) ...

随机推荐

  1. Nginx 配置高可用

    阅读本文需要安装Nginx 一 什么是高可用 nginx作为负载均衡服务器 所有请求都到了nginx 可见nginx处于非常重要的位置 如果nginx服务器宕机 后端web服务器将无法提供服务 影响严 ...

  2. javascript 数组对象及其方法

    数组声明:通过let arr = new Array(); 或者 let arr = []; 数组对象可调用的方法: 1)find方法,使用情况是对数组进行筛选遍历,find方法要求某个函数(A)作为 ...

  3. Leetcode——30.与所有单词相关联的字串【##】

    @author: ZZQ @software: PyCharm @file: leetcode30_findSubstring.py @time: 2018/11/20 19:14 题目要求: 给定一 ...

  4. 什么是GPS的冷启动、温启动和热启动?

    对于GPS多种启动方式的概念还很模糊,冷启动.热启动.温启动各种专业术语铺天盖地,使得许多用户眼花缭乱. 我们简单从定义上了解一下几种GPS启动的方式,GPS开机启动分为冷启动.温启动.热启动三种. ...

  5. [转帖]QEMU和QEMU-KVM的关系

    QEMU和QEMU-KVM的关系 https://blog.csdn.net/shengxia1999/article/details/52244119   版权声明:本文为博主原创文章,未经博主允许 ...

  6. Delphi7如何实现让Tedit显示文字垂直居中(上下居中)

    通过下面的组件,可以在输入文字的时候自动垂直居中 直接把下面代码保存到Unit1.pas即可------------------------------------------ unit Unit1; ...

  7. Java之数据流-复制二进制文件

    package test_demo.fileoper; import java.io.*; /* * 数值字节流操作,复制二进制文件 * 输入流:从文件中读取数据,扩展为数据流(二进制) * 输出流: ...

  8. 【设计模式】—— 迭代模式Iterator

    前言:[模式总览]——————————by xingoo 模式意图 提供一个方法按顺序遍历一个集合内的元素,而又不需要暴露该对象的内部表示. 应用场景 1 访问一个聚合的对象,而不需要暴露对象的内部表 ...

  9. Linux中dpkg工具update-alternatives实现符号链接软件版本的切换(转)

    一.功能作用 update-alternatives是dpkg的实用工具,用来维护系统命令的符号链接,以决定系统默认使用什么命令. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配 ...

  10. Tomcat如何开启SSL配置(https)

    一.创建证书 证书用于客户端与服务端安全认证.我们可以使用JDK自带的keytool工具来生成证书.真正在产品环境中使用肯定要去证书提供商去购买,证书认证一般都是由VeriSign认证,官方地址:ht ...