本篇文章由:http://xinpure.com/css3-animation-steps-properties-for-analogue-effects/

animation 默认以 ease 方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。除了easelinearcubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用 steps 过渡方式,而时钟的指针嘀嗒旋转,就应该使用这种方式。

时钟动画分析

时钟的动画效果其实就只有一种,就是指针旋转了。

圆为360deg,秒针每秒旋转6deg,分针每60秒旋转6deg, 时针每3600秒旋转6deg

因此,我们所需要实现的动画效果就是:

  1. 秒针旋转360deg,60秒一个周期,无限循环动画

  2. 分针旋转360deg,3600秒一个周期,无限循环动画

  3. 时针旋转360deg: 216000秒一个周期,无限循环动画

时钟旋转的嘀嗒效果,不需要补间动画,应该使用 steps 来过渡(将旋转360deg的动画分步执行)

由于秒针、分针和时针的步长均为6deg,因此,可以将360deg分成60步完成 steps(60, end)

指针旋转360deg动画定义

@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes tick-tock {
to {
transform: rotate(360deg) translate3d(0, 0, 0);
}
}

为动画DOM元素添加 CSS3 样式 -webkit-transform: transition3d(0,0,0)-webkit-transform: translateZ(0),这两个属性都会开启GPU硬件加速模式,从而让浏览器在渲染动画时从CPU转向GPU,其实说白了这是一个小伎俩,也可以算是一个Hack,-webkit-transform: transition3d-webkit-transform: translateZ 其实是为了渲染3D样式,但我们设置值为0后,并没有真正使用3D效果,但浏览器却因此开启了GPU硬件加速模式。

绑定指针旋转动画

/* 秒针 */
-webkit-animation: tick-tock 60s steps(60, end) infinite;
animation: tick-tock 60s steps(60, end) infinite; /* 分针 */
-webkit-animation: tick-tock 3600s steps(60, end) infinite;
animation: tick-tock 3600s steps(60, end) infinite; /* 时针 */
-webkit-animation: tick-tock 216000s steps(60, end) infinite;
animation: tick-tock 216000s steps(60, end) infinite;

综合示例

HTML Code

<div class="clock">
<!-- 时钟刻度线条 -->
<div class="line"></div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div> <!-- 内部白圆与线条配合形成刻度 -->
<div class="white_circle"></div>
<!-- 时钟中心圆点 -->
<div class="black_circle"></div> <div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>

CSS Code

.clock {
position: relative;
width: 150px;
height: 150px;
margin: 50px auto;
border: 10px solid black;
border-radius: 50%;
}
.line {
position: absolute;
left: 50%;
margin-left: -3px;
width: 6px;
height: 150px;
background-color: gray;
}
.line1 {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.line2 {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.line3 {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.line4 {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.line5 {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.line6 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.line1, .line2, .line3, .line4, .line5 {
width: 2px;
margin-left: -1px;
}
.white_circle {
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #fff;
}
.black_circle {
position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #000;
z-index: 1;
} .hour {
position: absolute;
top: 50%;
right: 50%;
width: 35px;
height: 6px;
margin-top: -3px;
background-color: #000;
border-radius: 5px;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-animation: tick-tock 216000s steps(60, end) infinite;
animation: tick-tock 216000s steps(60, end) infinite;
}
.minute {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 46px;
margin: -46px 0 0 -3px;
background-color: #000;
border-radius: 5px;
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-animation: tick-tock 3600s steps(60, end) infinite;
animation: tick-tock 3600s steps(60, end) infinite;
}
.second {
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 50px;
margin: -50px 0 0 -1px;
background-color: red;
border-radius: 5px;
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-animation: tick-tock 60s steps(60, end) infinite;
animation: tick-tock 60s steps(60, end) infinite;
} @keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes tick-tock {
to {
transform: rotate(360deg) translate3d(0, 0, 0);
}
}

结果示图

CSS3使用Animation steps属性实现指针时钟效果的更多相关文章

  1. animation steps属性实现帧动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  2. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

  3. 用animation的steps属性制作帧动画

    昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...

  4. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  5. 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  6. 关于帧动画steps属性的理解

    CSS3的Animation有八个属性 animation-name animation-duration animation-delay animation-iteration-count anim ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  9. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

随机推荐

  1. [Codeforces #211] Tutorial

    Link: Codeforces #211 传送门 一套非常简单的题目,但很多细节都是错了一次才能发现啊…… 还是不能养成OJ依赖症,交之前先多想想corner case!!! A: 模拟,要特判0啊 ...

  2. 【DFS】Paintball(6-22)

    [UVA11853]Paintball 算法入门经典第6章6-22(P175) 题目大意:有一个1000*1000的正方形战场,西南角坐标(0,0),西北角坐标(0,1000),有n个敌人,每个敌人处 ...

  3. [CF340D]Bubble Sort Graph/[JZOJ3485]独立集

    题目大意: 给你一个序列,对序列中所有逆序对之间连一条边,问图中最大独立集为多大,有哪些点一定在最大独立集中. 思路: 在纸上画一下发现最大独立集一定是元序列的一个LIS,最大独立集必经点就是所有LI ...

  4. Web安全测试指南--信息泄露

    5.4.1.源代码和注释: 编号 Web_InfoLeak_01 用例名称 源代码和注释检查测试 用例描述 在浏览器中检查目标系统返回的页面是否存在敏感信息. 严重级别 中 前置条件 1.  目标we ...

  5. Composer与laravel安装

    首先,要知道Composer是什么? Composer是PHP中用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer会帮你 ...

  6. Python结合Shell/Hadoop实现MapReduce

    基本流程为: cat data | map | sort | reduce cat devProbe | ./mapper.py | sort| ./reducer.py echo "foo ...

  7. 十二.spring-boot使用spring-boot-freemarker

    ①.在springMVC中:它代表着view层组件 ②.为什么使用freemarker:简单容易学.逻辑分明 ③.freemarker优点:它不依赖servlet.网络或者web环境 一.创建一个ma ...

  8. 二十四种设计模式:迭代器模式(Iterator Pattern)

    迭代器模式(Iterator Pattern) 介绍提供一种方法顺序访问一个聚合对象中各个元素,而又不需暴露该对象的内部表示. 示例有一个Message实体类,某聚合对象内的各个元素均为该实体对象,现 ...

  9. [转]SSIS Recordset Destination

    本文转自:http://www.sqlis.com/sqlis/post/Shredding-a-Recordset.aspx Doing what to a recordset? Shredding ...

  10. Docker创建centos的LNMP镜像

    前段时间重装了系统,今天刚好有时间,就用docker安装一个lnmp开发环境,下面是我的安装笔记. 1. 安装docker 这个就不说了,不会的可以看下我之前的文章<Docker介绍及安装> ...