css3 动画 结合jquery 学习备忘
2014-11-06 11:44
661 查看
css3动画兼容性（@keyframes）：
IE10+，Firefox，Opera 支持@keyframes 规则
Chrome Safari 需要前缀 -webkit-@keyframes
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
创建动画
1 @keytframes 动画选择器 （定义动画的过程
1 from{}tp{} 表示:0%{}100%{}
2 指定变化过程 0%{}20%{}40%{}80%{}100%{}
）
2 动画选择器 （
必选项：
规定动画的名称
规定动画的时长 默认时长是0 不设置的话 不会有动画
）
css3 所有动画属性
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
属性说明:
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。（缓冲运动）
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。
==================================
根据以上的介绍css3依然无法完成令人满意的效果，css3的动画还包括一些高级特性
变形 IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+
1 transform(基本的变形 需要指定过渡方式)
transform: none | <transform-function>[<transform-function>]*
取值：
none:表示不进行变换；
<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。
1.rotate(<angle>):旋转元素
2.scale(<number>[, <number>]):缩放元素
3.translate(<translation-value>[, <translation-value>]):移动元素
4.skew(<angle> [,<angle>]):倾斜元素
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
6.perspective(length):透视
2 过渡 transition
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
transition: property duration timing-function delay;
-webkit-transition:property duration timing-function delay;
property:规定设置过渡效果的 CSS 属性的名称。
duration:规定完成过渡效果需要多少秒或毫秒
timing-function:规定速度效果的速度曲线。
delay:定义过渡效果何时开始。
上面说了那么多，那么问题来了。transition 和 animation 之间是什么关系?
感觉两个重合了，
transition属性是一个简单的动画属性，非常简单非常容易用。
可以说它是animation的简化版本，是给普通做简单网页特效用的。animation可以做更加精细的动画：
给元素加上动画样式 他会执行动画，但不会监听样式属性，也就是某一个样式属性改变时不会触发动画
给元素加上transtion样式时 会监听指定的样式属性，当属性改变的时候会触发过度效果
transform只是静态的变化，不涉及动画。只有添加了变形的过渡属性监听，才会有动画
IE10+，Firefox，Opera 支持@keyframes 规则
Chrome Safari 需要前缀 -webkit-@keyframes
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
创建动画
1 @keytframes 动画选择器 （定义动画的过程
1 from{}tp{} 表示:0%{}100%{}
2 指定变化过程 0%{}20%{}40%{}80%{}100%{}
）
2 动画选择器 （
必选项：
规定动画的名称
规定动画的时长 默认时长是0 不设置的话 不会有动画
）
css3 所有动画属性
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
属性说明:
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。（缓冲运动）
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。
==================================
根据以上的介绍css3依然无法完成令人满意的效果，css3的动画还包括一些高级特性
变形 IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+
1 transform(基本的变形 需要指定过渡方式)
transform: none | <transform-function>[<transform-function>]*
取值：
none:表示不进行变换；
<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。
1.rotate(<angle>):旋转元素
2.scale(<number>[, <number>]):缩放元素
3.translate(<translation-value>[, <translation-value>]):移动元素
4.skew(<angle> [,<angle>]):倾斜元素
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
6.perspective(length):透视
2 过渡 transition
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
transition: property duration timing-function delay;
-webkit-transition:property duration timing-function delay;
property:规定设置过渡效果的 CSS 属性的名称。
duration:规定完成过渡效果需要多少秒或毫秒
timing-function:规定速度效果的速度曲线。
delay:定义过渡效果何时开始。
上面说了那么多，那么问题来了。transition 和 animation 之间是什么关系?
感觉两个重合了，
transition属性是一个简单的动画属性，非常简单非常容易用。
可以说它是animation的简化版本，是给普通做简单网页特效用的。animation可以做更加精细的动画：
给元素加上动画样式 他会执行动画，但不会监听样式属性，也就是某一个样式属性改变时不会触发动画
给元素加上transtion样式时 会监听指定的样式属性，当属性改变的时候会触发过度效果
transform只是静态的变化，不涉及动画。只有添加了变形的过渡属性监听，才会有动画
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=utf-8">
<title>css3动画效果</title>
<script src="../config/js/jquery.js"></script>
<style>
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
/*基本的动画*/
#div1
{
/*定义动画的名称*/
animation-name: myfirst;
-webkit-animation-name: myfirst;
-moz-animation-name: myfirst;
-ms-animation-name: myfirst;
/*动画时长*/
animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5ms;
/*速度曲线函数：速度曲线用于使变化更为平滑*/
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
/*动画延时*/
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
/*动画的循环次数*/
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
}
.demo_rotate{
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
padding:10px;
margin:90px auto;
background: #f00;
}
.demo_rotate:hover{
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-moz-transform:rotate(360deg) scale(1.2,1.2);
background:#ff9900;
}
/*
测试移动动画
*/
/*
transition
*/
.a-auto-3{
transition:all 0.8s ease-in-out;
-moz-transition:all 0.8s ease-in-out;
-ms-transition:all 0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
.a-element-13{left:1998px; top:0px; opacity:0; z-index:1;}
.a-element-13-a{left:350px; top:0px; opacity:1; }
.a-element{ position:absolute; display:block;}
</style>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;"></div>
<!--
<div class="demo_rotate" style="width: 100px;height: 100px;"></div>
-->
<img src="img-15.jpg" class="a-element a-element-13 a-auto-3 " >
<script>
$(function(){
$(".a-element").addClass("a-element-13-a");
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3结合jQuery实现动画效果及回调函数的实例
- CSS3结合jQuery实现动画效果及回调函数
- 《jQuery从入门到精通》第五十节 jQuery动画与CSS3的结合使用
- Jquery学习笔记——动画
- 从零开始学习jQuery (七) jQuery动画实现 让页面动起来
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 黄聪：学习笔记: CSS3 鼠标悬停动画
- 从零开始学习jQuery (七) jQuery动画-让页面动起来! 【转】
- jQuery学习教程（九）：动画
- jQuery学习笔记--jQuery的动画
- jQuery学习笔记之jQuery的动画
- jquery学习第十二番 动画
- jquery学习笔记-jquery结合showModalDialog实现子页面局部刷新父页面
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 从零开始学习jQuery (七) jQuery动画实现 让页面动起来
- jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- jQuery在学习之四、jQuery事件与动画
- jquery学习第十一番 事件和动画