[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环

  .animation-block {width: 50px;height: 50px;background: red;margin-top: 200px;animation: up 1s linear, down 1.5s linear 1s;}@keyframes up {0% {transform: translateY(0px);}50% {transform: translateY(-100px);}100% {transform: translateY(0px);}}@keyframes down {0% {transform: translateY(0px);}50% {transform: translateY(100px);}100% {transform: translateY(0px);}}<div class="animation-block"></div>var box = document.querySelector('.animation-block');
var i = 0
box.addEventListener("webkitAnimationEnd", function() {  i++if (i == 2) {i = 0box.classList.remove('animation-block');setTimeout(function() {box.classList.add('animation-block');}, 0)}
}, false);

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环相关推荐

[css] 写一个高度从0到auto的transition动画
[css] 写一个高度从0到auto的transition动画写不了吧,max-height 定值倒是可以个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一 ...
[css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
用Html+css写一个渐变背景的个人名片
原文地址:10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的 ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
[css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...

[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环

[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环

个人简介

主目录

[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环相关推荐

最新文章

热门文章