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. 安装Stunnel来实现正向代理邮件

    文:铁乐与猫 2017年8月 一开始我是使用yum install来安装stunnel的 感觉版本低点也无所谓,毕竟只是拿来加密代理一下邮件收发. 可是后来发现之前下载的最新官网版本的tar包里有很多 ...

  2. ZT 二分插入排序也称折半插入排序

    二分插入排序也称折半插入排序,基本思想是:设数列[0....n]分为两部分一部分是[0...i]为有序序列,另一部分是[i+1.....n]为无序序列,从无序序列中取一个数 x ,利用二分查找算法找到 ...

  3. Substring Search

    查找子字符串 Introduction 在长度为 N 的文本里寻找长度为 M 的模式(子串),典型情况是 N >> M. 这个应用就很广泛啦,在文本中寻找特定的模式(子串)是很常见的需求. ...

  4. 本地YUM源制作

    YUM相关概念 什么是YUM YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管 ...

  5. JS相关知识点总结

    一.获取元素方法 1.document.getElementById("元素id号"); 可以使用内置对象document上的getElementById方法来获取页面上设置了id ...

  6. FreeMarker标签使用

    FreeMarker标签使用 模板技术在现代的软件开发中有着重要的地位,主要用于view层的展示,freemarker是比较流行的一种. 一.FreeMarker模板文件主要有4个部分组成 ①文本,直 ...

  7. python第二十五课——闭包

    满足闭包的三个条件: 1).有外部函数和内部函数这样的结构 2).外部函数中定义的变量被内部函数所使用 3).内部函数对象作为返回值被外部函数返回 演示闭包的定义和使用: def outer(): a ...

  8. HtmlImageGenerator字体乱码问题解决、html2image放linux上乱码问题解决

    使用html2image-0.9.jar生成图片. 在本地window系统正常,放到服务器linux系统时候中文乱码问题.英文可以,中文乱码应该就是字体问题了. 一.首先需要在linux安装字体,si ...

  9. linux用户相关及/etc/passed,/etc/group,/etc/shadow

    useradd:新建用户 usermod:修改用户相关信息 userdel:删除用户分(-r选项) 组的操作与用户的操作类似 选项 userdel相关选项: -f:强制删除用户,即使用户已登录 -r: ...

  10. 20145203盖泽双 《Java程序设计》第十周学习总结

    20145203盖泽双 <Java程序设计>第十周学习总结 教材学习内容总结 一.网络概述 1.网络编程就是两个或多个设备(程序)之间的数据交换. 2.识别网络上的每个设备:①IP地址②域 ...