.cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }
.title::after { content: “”; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: -4px; -webkit-transition: all 0.3s ease-in-out; }
.up::after { -webkit-transform: rotate(135deg); top: 1px; }
.down::after { -webkit-transform: rotate(-45deg); top: -4px; }
</style>
</head>
<body>
<header class=”cm-header”>
<h1 class=”title up” id=”title”>
点击我</h1>
</header>
<script type=”text/javascript”>
var el = $(‘#title’);
el.on(‘click’, function () {
if (el.hasClass(‘up’)) {
el.removeClass(‘up’);
el.addClass(‘down’);
} else if (el.hasClass(‘down’)) {
el.removeClass(‘down’);
el.addClass(‘up’);
}
});
</script>
</body>
</html>
简单的动画使用transition，复杂的动画便要使用animation了；或者说需要从一个状态到另一个状态的话，最好使用animation
复制代码
animation
animation-name 对于keyframe的名称
animation-duration 动画花费时间
animation-timing-function 动画曲线
animation-delay 延迟多少毫秒a执行
animation-iteration-count 执行次数
animation-direction 是否反方向播放
我们一般使用前四个参数，这里的使用需要先创建keyframe规则，这里先来一个简单的例子：
复制代码
<html>
<head>
<meta charset=”utf-8″ />
<title>Blade Demo</title>
<style type=”text/css”>
@-webkit-keyframes demoFrame {
from { left: 0; }
to { left: 100px; }
}
div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; }
.demo { -webkit-animation: demoFrame 1s ; }
</style>
<script id=”others_zepto_10rc1″ type=”text/javascript” class=”library” src=”/js/sandbox/other/zepto.min.js”></script>
</head>
<body>
<div id=”demo”>
</div>
<input type=”button” value=”点击我开始动画” id=”btn”>
<script>
var el = $(‘#demo’);
var btn = $(‘#btn’);
el.on(‘webkitAnimationEnd’, function () {
el.removeClass(‘demo’);
});
btn.on(‘click’, function() {
el.addClass(‘demo’);
});
</script>
