使用CSS3的step()生成的动画效果
在线演示及下载
在这些DEMO中,将演示如何使用CSS3的step()来处理动画效果。
运动的小车:
.contain-car {
animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
animation: drive 4s steps(4, start) infinite;
}
@keyframes drive {
to {
transform: translateX(640px);
}
}
时钟效果:
.second {
animation: tick-tock 60s steps(60, end) infinite;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
脚爪:
.cover {
animation: walk 7s steps(7, end) infinite;
}
@keyframes walk {
to {
transform: translateX(675px);
}
进度:
.circle {
animation: fill 5s steps(5, start) forwards;
}
@keyframes fill {
to {
opacity: 1;
}
}
关键词:DEMO、CSS3、CSS教程、html5
【使用CSS3的step()生成的动画效果】相关文章
4. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果
5. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
9. 使用HTML5+JavaScript生成的一款儿时的经典游戏
10. 利用CSS3制作动画效果
本文来源:https://www.51html5.com/a1035.html
﹝使用CSS3的step()生成的动画效果﹞相关内容
- 利用CSS3制作动画效果
- Your First Step
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 动感的图片标题动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 服务器端生成的 JavaScript 响应
- CSS3实现简单的动画图片说明效果
- 一个跨浏览器的数字输入jQuery插件Stepper
- CSS伪类的动画和过渡效果应用
- 超实用!可视化CSS3动画生成神器Stylie