CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用CSS3的step()生成的动画效果

使用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()生成的动画效果】相关文章

1. 使用CSS3的step()生成的动画效果

2. 使用CSS3设计漂亮的动画效果3D大按钮

3. 使用CSS3的褪色和动画效果构建消息提醒框

4. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果

5. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

6. 10款重量级CSS3的全新特效 实现绚丽前端动画效果

7. 使用CSS制作APPLE WATCH刻度盘动画效果

8. CSS3动画效果-animate.css

9. 使用HTML5+JavaScript生成的一款儿时的经典游戏

10. 利用CSS3制作动画效果

本文来源:https://www.51html5.com/a1035.html

点击展开全部

﹝使用CSS3的step()生成的动画效果﹞相关内容

「使用CSS3的step()生成的动画效果」相关专题

其它栏目

也许您还喜欢