css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画
一、总结
一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1、哪些样式可以设置过渡动画？
transform加别的css
11 transition: width 2s, height 2s, transform 2s;
2、如何设置为hover里面的所有样式都执行过渡动画？
transition: all 1s ease 0s;
3、过渡动画如何实现？
首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1 div{
2 width:256px;
3 height:256px;
4 border:2px solid #999;
5 overflow:hidden;
6 transition:transform 2s;
7 }
8
9 div:hover{
10 transform:rotate(360deg);
11 }
二、transition+css或transform实现过渡动画
1、相关知识
不仅transform可以，其它css也可以
2、代码
div{
width:256px;
height:256px;
border:2px solid #999;
overflow:hidden;
transition:transform 2s;
}
div:hover{
transform:rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
11 transition: width 2s, height 2s, transform 2s;
} div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>
css3-12 transition+css或transform实现过渡动画的更多相关文章
- css3中什么时候用transition什么时候用animation实现动画
在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3特效之转化（transform）和过渡（transition）
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...
随机推荐
- 如何让hudson的两个job共用一个svn工作目录
作者:朱金灿 来源:http://blog.csdn.net/clever101 现在我的需求是这样的:一个软件需要编译完全版本和基础版本,完全版本的基础功能较多,基础版本只包含了基础功能.有时只需要 ...
- Linux LiveCD 诞生记
Linux LiveCD 诞生记 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...
- nodejs学习（二）--express热更新nodemon，自启动项目
一.说一下 每次修改文件,我们都需要重启服务器npm start,很麻烦,所以使用引入nodemon插件,解决这个问题,实现保存文件,即自启动刷新项目 二.直接开码 npm install nodem ...
- Dcloud课程9 天气小助手如何实现
Dcloud课程9 天气小助手如何实现 一.总结 一句话总结:调用天气的接口,如果网上找不到好用的,而如果仅仅是测试,那就自己写一个简单的接口就可以了. 1.dcloud中的css样式怎么调? 和网页 ...
- Java学习笔记三
1.面向过程思想,强调的是过程(即动作,函数):面向对象思想,强调的是对象. 2.类与对象关系:类是对事物的描述(属性和行为-方法),对象是类的实例.对象通过new生成.属性也称成员变量;方法也称成员 ...
- yarn的安装和使用
yarn的简介: Yarn是facebook发布的一款取代npm的包管理工具. yarn的特点: 速度超快. Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载. 同时利用并行下载以最大化资源 ...
- 一、Docker安装
原文:一.Docker安装 如果没有特殊要求关闭selinux!关闭selinux!关闭selinux!重要事情说三遍.这个坑活活让我重装了3.4遍系统才发现问题 本系列基于Centos系统安装,包括 ...
- 在Linux下用CANopenSocket协议模拟CAN总线通讯
一.参考文档 https://github.com/CANopenNode/CANopenSocket //下载 CANopenSocket 的源码 http://elinux.org/Can-uti ...
- 多线程中的"断点"续传《notify()和wait()》
眼下在做一个项目.关于软件管理与下载的,预计项目提交日期定在6月9号.项目做了有20天了,可是在一个功能上卡住了.在这个项目中有一个功能----APK的下载须要实现. 相信大家都玩过非常多关于下载AP ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...