O(∩_∩)O~

这两天在看看CSS的相关内容，关于transition动画感觉很有意思，分享一下。

CSS负责给html加效果，自然少不了各种动画，今天介绍一下transition。

概述

看一段比较学术的定义：transition主要负责页面的过渡效果，transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发，并平滑地以动画效果改变css的属性值。

transition的几个常用属性

1.transition-property：设置哪些属性进行过渡。

2.transition-duration：完成过渡动画需要的时间，默认为零。

3.transition-timing-function：设置动画的缓冲效果，默认是ease（逐渐变慢）。其他常用的几个值有ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）。

4.transition-delay：设置动画开始的延迟时间，默认是零。

ps：实际应用中，可以将四个属性简写到一条指令：transition：property duration timing-function delay; 实际就是把四个属性合到一块儿，中间用空格隔开。

实例

使用transition，实现一个过渡效果，一个红色的正方形，当鼠标进入该区域时，红色正方形放大一倍，同时变成绿色的圆形。鼠标离开，还原到初始状态。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css的transition属性</title>

 </head>

 <style type="text/css">

     .box{

         width: 100px;

         height: 100px;

         margin: 50px auto;

         background-color: #f00;

         transition:all 1s;

     }

     /*css中的:hover选择器用于选择鼠标指针浮动在上面的元素。*/

     .box:hover{

         width: 200px;

         height: 200px;

         border-radius: 50%;

         background-color: #00bf00;

         transition-property: width,height,border-radius,background-color;

         transition-duration: 1s;

         transition-timing-function: ease-in;

         transition-delay: 100ms;

     }

 </style>

 <body>

 <div class="box"></div>

 </body>

 </html>

CSS过渡动画之transition的更多相关文章

  1. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  2. CSS 过渡动画

    一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...

  3. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  4. CSS平滑过渡动画：transition

    <html> <head> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/boo ...

  5. css简单动画（transition属性）

    一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property     过渡效果的 CSS 属性的名称(height ...

  6. css过渡动画

    具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...

  7. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

随机推荐

  1. Maven构建时跳过部分测试

    当遇到以下场景: 其他人写的单元测试影响统计结果 一些需要调用外部接口的测试暂不运行 需要在非本机环境上运行一些不回滚的单元测试 则有必要选择以下方法跳过部分测试. 在测试用例前加上注解 @Ignor ...

  2. java判断字符串内容

    java判断字符串是否全为数字 String str = "032";boolean isNum = str.matches("[0-9]+"); java判断 ...

  3. HTTP 错误 404.3 - Not Found的问题（WCF）

    模块 StaticFileModule 通知 ExecuteRequestHandler 处理程序 StaticFile 错误代码 0x80070032 请求的 URL http://10.101.3 ...

  4. LA 3938 动态最大连续区间 线段树

    思路很清晰,实现很繁琐.分析过程可以参考LRJ,自己的总结晚些放. #include <cstdio> #include <cstring> #include <algo ...

  5. 用eval似乎会执行结果一次性返回,结果显示的是一行

    with open(r'商品资料','r',encoding='utf-8') as f1: lis_goods = eval(f1.read()) # 用eval似乎会执行结果一次性返回,结果显示的 ...

  6. 我的Java之旅——之后的学习计划

      在写完第一个Java程序之后,对于一些最最基本的东西有了大致的了解,对于之后的学习,我做了简单的计划. 7月17号:补充一些基本内容. 7月18.19号: 1. Java的一些常用类,包括 :Nu ...

  7. RYU基础整理

    1. RYU结构,源码 1.1 RYU文件目录 下面介绍ryu/ryu目录下的主要目录内容. base base中有一个非常重要的文件:app_manager.py,其作用是RYU应用的管理中心.用于 ...

  8. JSTORM 问题排查

    ## 运行时topology的task列表中报"task is dead"错误有几个原因可能导致出现这个错误: 1. task心跳超时,导致nimbus主动kill这个task所在 ...

  9. 打造自己的移动绿色版 Python 环境

    本文只适用 Windows 系统,Linux,Mac 或其他系统可以直接自己写个脚本安装就好了,甚至大部分系统自带. 相信某些人写好了Python程序结果给朋友运行又得装个Python环境,难免失去了 ...

  10. Hadoop学习之路（六）HDFS基础

    HDFS前言 HDFS:Hadoop Distributed File System ,Hadoop分布式文件系统,主要用来解决海量数据的存储问题 设计思想 1.分散均匀存储 dfs.blocksiz ...