CSS3动画与过渡
transform:在使用2D或3D转换前需用transform-style申明转换的类型,preserve-3d或者preserve-2d
属性
translate():
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数移动。
rotate():
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转.
在3D下,有rotateX():向屏幕例外翻转;rotateY():在屏幕左右翻转,rotateZ():与2d下rotate()相同,在屏幕上顺时针或逆时针旋转。
scale():
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
skew():
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
transition:在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果
必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
例:transition:width 2s;
样式:ease 平缓变化
linear均匀变化
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始,缓慢结束
动画:首先要先用@keyframe 动画名 的格式定义一个动画,再用animation调用动画
@keyframe myfirst{
from{}//开始效果
to{}//结束效果
}
或@keyframe myfirst{
0%{} //也可以用百分比表示动画的进程
30%{}
70%{}
100%{}
}
animation:
animation-name: myfirst; //动画名
animation-duration: 5s;//动画时长
animation-timing-function: linear;//动画变化效果,同transition
animation-delay: 2s;//动画延迟播放时间
animation-iteration-count: infinite;//infinite定义为无线循环
animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。
CSS3动画与过渡的更多相关文章
- CSS3 动画及过渡详解
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...
- 优秀教程:使用 CSS3 动画实现的超炫的过渡特效
Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- CSS3学习(CSS3过渡、CSS3动画)
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- css3中的变换、动画和过渡
变换:分为2d变换和3d变换,但一次只能用一个变换属性,多个的话最后一个会覆盖前面所有最终被浏览器实现,变换可以成为过渡和动画的一个待变参数(类似width,opacity等). 过渡:是动画的初始模 ...
随机推荐
- jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- AVCaptureDevice LED闪光灯控制
转载自:http://blog.csdn.net/cloudhsu/article/details/7202368 #import <AVFoundation/AVFoundation.h> ...
- HQL和Criteria
HQL: public boolean doCreate(Dept vo) throws Exception { return this.sessionFactory.getCurrentSessio ...
- 框架学习笔记:深度解析StrangeIoC内部运行机制
StrangeIoC的设计和RobotLegs一致,所以我的解析会对照RobotLegs来看. 整个框架使用的是MVCS的模式,关于MVCS模式大家可以点这里进行查看,这里就不谈了,既然Strange ...
- JQuery要点(一)
简介: jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & ...
- 无线路由器的“克隆MAC地址”是干什么作用的?
本文章转载:http://blog.sina.com.cn/s/blog_4c900d100102uysb.html 1.问题: 无线路由器的“克隆MAC地址”是干什么作用的?怎样使用? 2.使用背景 ...
- UVa442 Matrix Chain Multiplication
// UVa442 Matrix Chain Multiplication // 题意:输入n个矩阵的维度和一些矩阵链乘表达式,输出乘法的次数.假定A和m*n的,B是n*p的,那么AB是m*p的,乘法 ...
- 方法字段[C# 基础知识系列]专题二:委托的本质论
首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 引言: 上一个专题已和大家分享了我懂得的——C#中为什么须要委托,专题中简略介绍了下委托是什么以及委托简略的应用的,在这个专题中将对委托做进 ...
- linux下的shell命令的编写,以及java怎样调用linux的shell命令(java怎样获取linux上的网卡的ip信息)
程序猿都非常懒,你懂的! 近期在开发中,须要用到server的ip和mac信息.可是server是架设在linux系统上的,对于多网口,在获取ip时就产生了非常大的问题.以下是在windows系统上, ...
- javascript 笔记(待续)
1.基础对象 var o=new Object(); o.xxx=1; o.xx=2; var 01={xxx=1,xx=2} 2.==与=== "5"==5 Tru ...