css3动画学习资料整理
2016-05-05 21:19
756 查看
现在主流浏览器(先不管IE8，IE9吧)，尤其是移动端浏览器基本都支持css3了，为了增强页面的表现力，css3动画必不可少了。这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料，并附上两个比较常用的例子。
css3动画主要包括三个部分transform,transition和animation,具体的属性和用法，如果有一定的英语和数学基础可以看w3c css3标准：https://www.w3.org/standards/techs/css#w3c_all。
其他可以参考的文章：
循环动画实现：http://www.cnblogs.com/starof/p/5443445.html
transform：http://www.cnblogs.com/starof/p/4560076.html
transition：http://www.cnblogs.com/starof/p/4582367.html
animation：http://www.cnblogs.com/starof/p/4585324.html
阮一峰的介绍：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
很多动画例子可以借用animation.css这个项目。
下面上两个例子，一个是loading动画，一个是webapp常用的切入切出效果。css代码也没什么好解释的，直接上代码和效果吧。
一.loading动画
/*
-moz-animation:loadanimation 1s linear infinite;
-ms-animation:loadanimation 1s linear infinite;
-o-animation:loadanimation 1s linear infinite;
animation:loadanimation 1s linear infinite;
*/
效果图如下：(中间的小圈是会转的,当然这个并非一定要用css动画，用gif动态图片代替也是一样的)
更多loading动画效果可以参考这位园友写得 http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
二.切入切出效果
css3动画主要包括三个部分transform,transition和animation,具体的属性和用法，如果有一定的英语和数学基础可以看w3c css3标准：https://www.w3.org/standards/techs/css#w3c_all。
其他可以参考的文章：
循环动画实现：http://www.cnblogs.com/starof/p/5443445.html
transform：http://www.cnblogs.com/starof/p/4560076.html
transition：http://www.cnblogs.com/starof/p/4582367.html
animation：http://www.cnblogs.com/starof/p/4585324.html
阮一峰的介绍：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
很多动画例子可以借用animation.css这个项目。
下面上两个例子，一个是loading动画，一个是webapp常用的切入切出效果。css代码也没什么好解释的，直接上代码和效果吧。
一.loading动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
<style>
.overlay {
background-color: rgba(30, 30, 30, 0.5);
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
left:0;
top:0;
}
.loading{
background: url(./image/loading.png) no-repeat;
background-size: 100% 100%;
margin-left: -40px;
position: fixed;
z-index: 2000;
width: 80px;
height:80px;
top:50%;
left:50%;
-webkit-animation:loadanimation 1s linear infinite;/*
-moz-animation:loadanimation 1s linear infinite;
-ms-animation:loadanimation 1s linear infinite;
-o-animation:loadanimation 1s linear infinite;
animation:loadanimation 1s linear infinite;
*/
}
@-webkit-keyframes loadanimation{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="overlay">
<div class="loading"></div>
</div>
</body>
</html>效果图如下：(中间的小圈是会转的,当然这个并非一定要用css动画，用gif动态图片代替也是一样的)
更多loading动画效果可以参考这位园友写得 http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
二.切入切出效果
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>slider-4</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
@charset "UTF-8";
* {margin: 0;padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html {
width: 100%;
height: 100%;
}
body {
min-width: 320px;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Verdana;
}
header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 44px;
line-height: 44px;
background-color: #3e74b9;
text-align: center;
color: #FFF;
}
section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
footer {
position: relative;
z-index: 2;
width: 100%;
height: 50px;
margin-top: -50px;
line-height: 50px;
background-color: rgba(0,0,0,.6);
text-align: center;
color: #FFF;
}
.view-container {
position: relative;
width: 100%;
height: 100%;
}
.page-container {
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F8F8F8;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
}
.page-num {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
font-size: 72px;
}
#pageB {
background-color: #ECB43A;
}
/* 差速滑动组合 */
.slideSlow {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
}
.slideFast {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
}
.slideSlowBack {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
}
.slideFastBack {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
}
.pageInt {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.pageOld {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.pageNew {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
</style>
</head>
<body>
<header>HEADER </header>
<section>
<!-- view container -->
<ul id="pages" class="view-container" style="">
<!-- pageA container -->
<li id="pageA" class="page-container pageInt" style="display:;"> <b id="btnNext1" class="page-num">A</b> </li>
<!-- pageB container -->
<li id="pageB" class="page-container pageNew" style="display:;"> <b id="btnNext2" class="page-num">B</b></li>
<!-- pageC container -->
<li id="pageC" class="page-container pageNew" style="display:;"> <b id="pageBack" class="page-num">C</b></li>
</ul>
</section>
<footer>FOOTER</footer>
<!-- framework -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>
var screenW = $('body').width();
var btnNext1 = $('#btnNext1');
var btnNext2 = $('#btnNext2');
var pageBack = $('#pageBack');
var pages = $('#pages');
var pageA = $('#pageA');
var pageB = $('#pageB');
var pageC = $('#pageC');
//.slideSlow 慢速滑动，一定是左边的页面
//.slideFast 快速滑动，一定是右边的页面
//.slideSlowBack 返回时，慢速滑动，一定是左边的页面
//.slideFastBack 返回时，快速滑动，一定是右边的页面
//.pageInt 初始页面位置
//.pageOld 正向划过页面位置 -100%
//.pageNew 正向未滑页面位置 +100%
btnNext1.click(function(){
pageA.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
});
btnNext2.click(function(){
pageB.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
pageC.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
});
pageBack.click(function(){
pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
pageC.css({'-webkit-transform' : 'translate3d(100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 带你了解CSS开发中的10个不要
- css position relative obsolution
- 【转】CSS选择器笔记
- CSS 的优先级机制
- HTML加入CSS
- 文本框字母小写即时转大写
- CSS3：color
- CSS3 border-image详解
- HTML&CSS——琐碎的知识点(2)
- HTML&CSS——琐碎的知识点(1)
- CSS 实现：文字水平垂直居中
- CSS教程之div垂直居中的多种方法
- css中解决textarea高度随内容自适应的问题
- CSS3使用边框和背景
- 前端必须掌握30个CSS3选择器
- sasscore学习之_mixin.scss
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- 记住CSS中的10个“不要”
- (礼拜四log)前端开发，使用jq的.css函数添加属性时!important要注意的问题
- IOS 改变tabbar的样式