1. html 结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
</head>
<body>
<div class="box"></div>
</body>
</html>

2. css 样式

body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
background-color: white;
width: 100px;
height: 100px;
/* transition-property: background; */
/* transition-duration: 2s; */
/* 延迟 */
/* transition-delay: 2s; */
/* transition-timing-function: ease-in-out; */
transition: 2s ease-in-out;
}
.box:hover {
background-color: red;
border-radius: 50%;
width: 300px;
height: 300px;
}

3. 动画属性

transition: 2s ease-in-out;

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

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3的transition动画功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. safari渲染Transition动画不流畅问题

    用css3的transition过渡来做页面动画的时候,发现在chrome和ff流畅,在safari 不流畅: 度娘找到了淘宝UED的一个类似解决方案,动画就流畅了. 测试环境: win7 32bit ...

  4. CSS3之边框样式(动画过渡)

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  5. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  6. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  7. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  8. CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

随机推荐

  1. kernel热补丁

    kernel正在运行的函数,如何实现地址替换的,高并发情况下,如何打热补丁

  2. 一键生成mapper、mapperxml等文件——MybatisX插件的使用

    本文首发于西二blogs:一键生成mapper.mapperxml等文件--MybatisX插件的使用 搬运请务必转载出处. MybatisX插件使用--为快速开发而生 前言:其实很久以前我就非常厌恶 ...

  3. Linux服务器上搭建Centos7.0+Apache+php+Mysql网站

    一.安装Linux系统 1.1虚拟机搭建Linux Centos7.0版本,搭建过程省略. 二. 安装apache.php.mysql.php-gd等组件. 2.1安装Apache服务程序(apach ...

  4. 利用公网Msf+MS17010跨网段攻击内网

    其实很多小白在对利用msf进行ms17010攻击的时候总是不成功,其实这都是因为网上大部分的文章都是写的内网对内网(192.168.1.2-->192.168.1.3)这样的案例,今天写了一下利 ...

  5. Java Study two

    由于前段时间再做.NET 项目没做更新,今天简单的学习java项目的新建和入门的学习 今日目标 基础语法了解 新建第一个java项目 新建第一个项目Class ->HelloWorld 运行并输 ...

  6. loj6077. 「2017 山东一轮集训 Day7」逆序对

    题目描述: loj 题解: 容斥+生成函数. 考虑加入的第$i$个元素对结果的贡献是$[0,i-1]$,我们可以列出生成函数. 长这样:$(1)*(1+x)*(1+x+x^2)*--*(1+x+x^2 ...

  7. Java中的序列化Serialable

    Java中的序列化Serialable https://blog.csdn.net/caomiao2006/article/details/51588838

  8. lombok的@builder 不能新建DO对象 Lombok存在的一些问题

    1. 实体类加上 lombok的@builder之后  就不能新建对象了,,,构造函数被覆盖了? 加上两个标签之后解决 2.Lombok存在的一些问题 lombok问题 @Builder和@NoArg ...

  9. 如何使用 Spring Boot 实现异常处理?

    Spring 提供了一种使用 ControllerAdvice 处理异常的非常有用的方法. 我们通过实现一个 ControlerAdvice 类,来处理控制器类抛出的所有异常.

  10. springMVC和struts2的区别有哪些?

    (1)springmvc的入口是一个servlet即前端控制器(DispatchServlet),而struts2入口是一个filter过虑器(StrutsPrepareAndExecuteFilte ...