CSS-3 Transition 的使用
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 的使用的更多相关文章
- CSS之transition(动画)
Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...
- 我想学前端动画-CSS之transition
Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- CSS之transition过渡练习
代码: <!DOCTYPE html><html><head> <title>transition</title> <meta cha ...
- css中transition的使用以及:before:after的使用(小样式)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- css笔记 - transition学习笔记(二)
开始把7,8月份学的css整理一下 transition过渡 1. CSS transition transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果. 2. tran ...
- css 中 transition 需要注意的问题
cubic-bezier 是 transition-timing-function 的值的一种. 四个参数的关系式如下(t 代表时间,取值范围 [0, 1]):P0(1-t)3 + 3P1t(1-t) ...
随机推荐
- Nginx 配置高可用
阅读本文需要安装Nginx 一 什么是高可用 nginx作为负载均衡服务器 所有请求都到了nginx 可见nginx处于非常重要的位置 如果nginx服务器宕机 后端web服务器将无法提供服务 影响严 ...
- javascript 数组对象及其方法
数组声明:通过let arr = new Array(); 或者 let arr = []; 数组对象可调用的方法: 1)find方法,使用情况是对数组进行筛选遍历,find方法要求某个函数(A)作为 ...
- Leetcode——30.与所有单词相关联的字串【##】
@author: ZZQ @software: PyCharm @file: leetcode30_findSubstring.py @time: 2018/11/20 19:14 题目要求: 给定一 ...
- 什么是GPS的冷启动、温启动和热启动?
对于GPS多种启动方式的概念还很模糊,冷启动.热启动.温启动各种专业术语铺天盖地,使得许多用户眼花缭乱. 我们简单从定义上了解一下几种GPS启动的方式,GPS开机启动分为冷启动.温启动.热启动三种. ...
- [转帖]QEMU和QEMU-KVM的关系
QEMU和QEMU-KVM的关系 https://blog.csdn.net/shengxia1999/article/details/52244119 版权声明:本文为博主原创文章,未经博主允许 ...
- Delphi7如何实现让Tedit显示文字垂直居中(上下居中)
通过下面的组件,可以在输入文字的时候自动垂直居中 直接把下面代码保存到Unit1.pas即可------------------------------------------ unit Unit1; ...
- Java之数据流-复制二进制文件
package test_demo.fileoper; import java.io.*; /* * 数值字节流操作,复制二进制文件 * 输入流:从文件中读取数据,扩展为数据流(二进制) * 输出流: ...
- 【设计模式】—— 迭代模式Iterator
前言:[模式总览]——————————by xingoo 模式意图 提供一个方法按顺序遍历一个集合内的元素,而又不需要暴露该对象的内部表示. 应用场景 1 访问一个聚合的对象,而不需要暴露对象的内部表 ...
- Linux中dpkg工具update-alternatives实现符号链接软件版本的切换(转)
一.功能作用 update-alternatives是dpkg的实用工具,用来维护系统命令的符号链接,以决定系统默认使用什么命令. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配 ...
- Tomcat如何开启SSL配置(https)
一.创建证书 证书用于客户端与服务端安全认证.我们可以使用JDK自带的keytool工具来生成证书.真正在产品环境中使用肯定要去证书提供商去购买,证书认证一般都是由VeriSign认证,官方地址:ht ...