css变换与动画详解
举个栗子：
--------元素整体居中
.box{
position:absolute;top:50%;left:50%;
width:50px;
height:50px;
transform:translate(-50%,-50%);
background:gray;
}
1.translate:移动，是transform的一个方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
2.transform:变形,改变
CSS3中主要包括：
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;
transform: rotate 旋转| scale 缩放| skew扭曲 | translate移动 |matrix矩阵变形;
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开
3.transition: 允许CSS属性值在一定的时间区间内平滑的过渡。(过渡动画)
Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡。
如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
transition主要包含四个属性值：
（1）执行变换的属性：transition-property；
（2）变换延续的时间：transition-duration；
（3）在延续时间段，变换的速率变化：transition-timing-function //例:平缓进入、先快后慢；
（4）变换延迟时间：transition-delay。
需要事件的触发，例如单击、获取焦点、失去焦点等。
语法：transition:property duration timing-function delay;
例如：transition:width 2s ease 0s;
4.Animation
Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，
与Transition不同的是：
1.Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行
（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活；
2.Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元
素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。
Animation模块包括了animation-name、animation-duration、animation-timing-function、
animation-delay、animation-iteration-count、animation-play-state等属性。
animation详解：
什么是css3中的动画：
使元素从一种样式逐渐变化为另一种样式
可以改变任意多的样式任意多的次数
可以用百分比规定变化发生的时间，或者用关键词“from”和“to”,等价于“0%”和“100%”，表示动画的开始和完成
通过css3我们可以创建动画，可以代替页面中的动画图片、Flash动画以及JavaScript。
如果创建css动画，需要了解@keyframes规则。
@keyframes规则用于创建动画，在其中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
实现：
在 @keyframes 中创建动画时，要将其捆绑到某个选择器，否则不会产生动画效果。
需要至少规定以下两项：
规定动画的名称
规定动画的时长
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
/*兼容处理*/
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
/*定义动画----myfirst是动画的名称*/
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css变换与动画详解的更多相关文章
- css 12-CSS3属性详解：动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- Android中的动画详解系列【4】——Activity之间切换动画
前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...
随机推荐
- Android 音视频深入 七 学习之路的总结和资料分享
说个实话一开始我对基于Android如何开发音视频很迷茫,甚至对音视频开发都不是很明白,我看了Android 音视频开发入门指南 http://blog.51cto.com/ticktick/1956 ...
- UVa 10340 - All in All 水题 难度: 0
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- python中字符串方法总结
定义一个空字符串: a=' '; s.strip() #去空格 s.upper()#全部转换成大写: s.lower()# 全部转换成小写: s.isdigit()#判断字符串是否只有数字组成:返回t ...
- dede织梦 dede:arclist当前索引值
{dede:arclist row='10' titlelen='50' flag='c'} <li class="rank[field:global name='autoindex' ...
- atom插件安装失败解决方法
在atom 上下载插件失败,可以用下面的方法. 1.找到C:/Users/你的用户名/.atom/packages/文件夹内 2.在.atom packages 目录下 使用gitbash 3.git ...
- window service 2008 解决80端口占用
1.进入cmd使用netstat 命令查看指定端口netstat -ano | findstr :802.如下所示:本地的80端口被进程为4的占用 TCP 0.0.0.0:80 ...
- 剑指Offer 36. 两个链表的第一个公共结点 （链表）
题目描述 输入两个链表,找出它们的第一个公共结点. 题目地址 https://www.nowcoder.com/practice/6ab1d9a29e88450685099d45c9e31e46?tp ...
- Centos上SSH连接过慢原因
最近发现机房里有些centos机器进行ssh登陆非常慢且会超时,经过查看发现时GSPI认证过慢问题造成: 使用 ssh -v 发现 debug1: SSH2_MSG_SERVICE_ACCEPT re ...
- 同时开始了SQL。。。
SQL LIMIT OFFSET 和 LIMIT code1: SELECT id, name, score FROM table ORDER BY score DESC LIMIT OFFSET 4 ...
- session and cooike
一.理解Cookie Cooie的作用: 当一个用户通过HTTP访问一个服务器时,这个服务器会将一些Key/Value键值对返回给客户端浏览器,并给这些数据加上一些限制条件,在条件符合时这个用户下次访 ...