<template>
  <div>
    <input id="stop" type="radio" name="playAnimation"/>
    <input id="play" type="radio" name="playAnimation"/>
    <div class="box">
        <label for="stop">
            <div class="btn">stop</div>
        </label>
        <label for="play">
            <div class="btn">play</div>
        </label>
    </div>
    <div class="animation"></div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}
input {
    display: none;
}
@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}
.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
   
    &:hover {
        background: #ddd;
        color: #333;
    }
   
    &:active {
        background: #aaa;
    }
}

// ~ 波浪号 https://www.w3school.com.cn/cssref/selector_gen_sibling.asp

#stop:checked ~ .animation {
    animation-play-state: paused;
}
#play:checked ~ .animation {
    animation-play-state: running;
}
</style>

纯css 实现动画的暂停和运动的更多相关文章

  1. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  2. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  5. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  6. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  7. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  8. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  9. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

随机推荐

  1. DataStage中Transformer的函数大全

    一. 类型转换函数 类型转换函数用于更改参数的类型. 以下函数位于表达式编辑器的"类型转换"类别中.方括号表示参数是可选的.缺省日期格式为 %yyyy-%mm-%dd. 以下示例按 ...

  2. Linux移植到自己的开发板(二)UBOOT和Linux

    @ 目录 一.uboot跳转到Linux 二. Linux内核启动之解压阶段 三. Linux内核启动之汇编阶段 插曲:关于Kconfig和Makefile 四. Linux内核启动之C语言阶段 五. ...

  3. 题解0002:Best Cow Fences

    题目描述:给定一个长度为n的正整数序列A.求一个平均数最大的,长度不小于L的子序列,输出这个平均数*1000. 题目链接:http://ybt.ssoier.cn:8088/problem_show. ...

  4. 学习廖雪峰的git教程6--版本控制

    1git log 查看提交的版本 2git reset --hard HEAD^回退到上一个版本 3git reset --hard 版本号 回到某一个版本

  5. Java有没有goto?

    goto是Java中的保留字,暂时还不是Java的关键字.

  6. 什么是Hystrix断路器?我们需要它吗?

    由于某些原因,employee-consumer公开服务会引发异常.情况下使用Hystrix我们定义了回退方法.如果在公开服务中发生异常,则回退方法返回一些默认值 . 如果firstPage metho ...

  7. Springmvc入门基础(五) ---controller层注解及返回类型解说

    0.@Controller注解 作用:通过@Controller注解,注明该类为controller类,即控制器类,需要被spring扫描,然后注入到IOC容器中,作为Spring的Bean来管理,这 ...

  8. CSS 网站布局

    Flex:https://www.html.cn/archives/8629 Grid:https://www.html.cn/archives/8510/    http://www.ruanyif ...

  9. String 和 StringBuilder、StringBuffer 的区别?

    Java 平台提供了两种类型的字符串:String 和 StringBuffer/StringBuilder,它 们可以储存和操作字符串.其中 String 是只读字符串,也就意味着 String 引 ...

  10. Unsafe Rust 能做什么

    在不安全的 Rust 中唯一不同的是,你可以: 对原始指针进行解引用 调用"不安全"的函数(包括 C 函数.编译器的内建指令和原始分配器. 实现"不安全"的特性 ...