web前端：原生css球体弹跳效果，animation动画keyframes应用，指定停止动画animation-play-state:paused

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量329 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： css html animation css3 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37056888/article/details/112689051
版权

1.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        position: absolute;
        width: 600px;
        height: 600px;
        background: url(../img/my-logo-2.png) repeat;
        background-size: 50px;
        border: 1px solid #000000;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px;
        
        &:hover #wrap-inner{
            //animation-play-state:动画执行的运行/暂停，默认值running，pause暂停
            animation-play-state: paused;
        }
        
        #wrap-inner {
            position: absolute;
            width: 300px;
            height: 300px;
            background: tomato;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 2px 2px 5px tomato;
            font: 30px/300px "微软雅黑";
            text-align: center;
            color: white;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            animation-name: rotated;
            animation-duration: 1.5s;
            //animation-timing-function: linear;
            animation-timing-function: cubic-bezier(.12,1.36,.65,-0.28);
            //direction:normal（from→to）reverse反转（to→from）、alternate（from→to→from...循环）/alternate-reverse
            animation-direction: alternate;
            animation-iteration-count: 6;
            //延迟为外部动画
            animation-delay: 1s;
            /*元素在动画外的状态: from之前to之后
              1. backwards与from一致=动画开始的动作，结束回归原位
              2. forwards与to一致=动画结束的动作，结束不回归原位
              3. both=动画开始/结束的动作，开始/结束不回归原位
            */
            //animation-fill-mode: backwards;
            //animation-fill-mode: forwards;
            animation-fill-mode: both;
        }
    }
    @keyframes rotated {
        from {
            //Y轴：x+100px
            transform: translateY(100px);
        }
        to {
            //Y轴：x-100px
            transform: translateY(-100px);
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 1px solid #000000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -300px;
}
* #wrap:hover #wrap-inner {
  animation-play-state: paused;
}
* #wrap #wrap-inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: tomato;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 2px 2px 5px tomato;
  font: 30px/300px "微软雅黑";
  text-align: center;
  color: white;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  animation-name: rotated;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.12, 1.36, 0.65, -0.28);
  animation-direction: alternate;
  animation-iteration-count: 6;
  animation-delay: 1s;
  /*元素在动画外的状态: from之前to之后
              1. backwards与from一致=动画开始的动作，结束回归原位
              2. forwards与to一致=动画结束的动作，结束不回归原位
              3. both=动画开始/结束的动作，开始/结束不回归原位
            */
  animation-fill-mode: both;
}
@keyframes rotated {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(-100px);
  }
}

3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画模式@keyframes{}</title>
	</head>
	<body>
		<div id="wrap">
			<div id="wrap-inner">cevent</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/less034.css" />
</html>

4.效果图

cevent

cevent
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎么使css 动画停止,如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍（详解）...
weixin_42527160的博客
08-03 1184
使用纯 CSS 的方法，暂停或播放 CSS 动画。是不是看起来应该是不可能的实现的；或者就算可以实现，也是一个很麻烦的实现方法，需要用大量的css样式才可以实现。其实不然，在 CSS3 animation 中，就有这样一个属性可以做到暂停、播放动画。本章就给大家介绍如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍(详解)。有一定的参考价值，有需要的...
web前端入门到实战：CSS动画@keyframes的用法
软件开发-前端开发-IT
09-09 1456
CSS动画 CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！ 动画浏览器支持 IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。 什么是CSS动画？ 动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元...
CSS动画的暂停和继续：@click改变动画的animation-play-state
pei_y_y的博客
11-23 1038
同事教我的，但他说是个笨方法，但我查了很久也没找到答案Orz... 我想要做一个唱片机，音乐播放时候唱片机旋转，音乐暂停唱片机也暂停，继续播放音乐，动画也从暂停的位置继续旋转. //这是一个图片，她的style名字是animationState，要在data(){}里声明animationState哦 <image class="img" :style="animationState" src="../../static/css/image/audioBG3.png" mode="aspectF
20、前端开发：CSS知识总结——animation动画属性
不迁怒，不贰过。小知识，大智慧。
08-26 4259
transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2200
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
ios 中使用 animation-play-state: paused 属性失效的问题
Kevinblant的博客
11-22 1197
前言 因为要做一个播放器的播放图片旋转动画，像这样子 当音乐播放就转动，停止就暂停。 开始 于是很自然地想到了使用Css3的 animation 动画属性 CSS3 animation（动画） 属性 animation-name 指定要绑定到选择器的关键帧的名称 animation-duration 动画指定需要多少秒或毫秒完成 animation-timing-function 设置动画将如...
微信小程序动画课程-通过wxss(css)来实现-animation-play-state属性
杭州.黄老师
01-19 2722
animation-play-state属性 定义和用法 animation-play-state 属性规定动画正在运行还是暂停。默认是 “running” 注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。 默认值： running 继承性： no 版本： CSS3 JavaScript 语法： object.style.animationPlayState=“p...
超详细 CSS动画-animation
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
03-17 3万+
css3 animation @keyframes
CSS3新特性详解(四)：CSS3过度transition和动画animation @keyframes规则详解
chuangxin的专栏
07-11 2845
本文讨论CSS3的过渡transition和动画animation属性。包括transition过渡属性使用说明、注意事项；animation动画属性的使用说明、注意事项，@keyframes规则定义；案例演示。
前端开发_HTML5_CSS部分-动画特效(animation)
u013185175的博客
12-19 1560
动画特效(animation) 1.引入 我们之前学习了过渡的特效，那么接下来我们一起来学习一下另一种比较特殊的特效动画。 2.动画特效(animation) (1)、概述:CSS 可使用animation实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！ (2)、动画animation相关的语法和参数说明 要实现一个动画的效果，需要实现两个步骤，如下: ①:使用@keyframes规则创建一个动画，用于定义相关的动画的属性，语法如...
svg-css-logo-animation:使用CSS动画完成SVG徽标动画
05-24
在本项目中，“svg-css-logo-animation”展示了如何利用CSS动画技术为SVG（可缩放矢量图形）徽标创建动态效果。SVG是一种基于XML的图形格式，它支持精确的矢量图形，这意味着无论放大多少倍，图像都能保持清晰。与...
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而CSS3的animation动画功能则为网页增添了许多动态效果和交互性。本课程"Web-前端html+css从入门到精通 142. animation动画基础语法"着重讲解了如何使用CSS3的`@...
Web-前端html+css从入门到精通 145. animation动画扩展语法.zip
05-23
除了基本属性，`animation`还包含其他可选参数，如`animation-direction`（控制动画是否反向播放）、`animation-fill-mode`（定义动画在开始前和结束后如何填充时间）和`animation-play-state`（控制动画是否暂停或...
利用css3-animation实现逐帧动画效果
09-24
本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果，这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先，我们需要了解 CSS3 的 `@keyframes` 规则，它是创建动画的核心。`@keyframes` 允许...
css3-animation-generator：chrome插件css3动画生成器
02-05
Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。使用1.从chrome webstore下载2.直接下载crx文件如果无法访问到chrome的应用商城，可以选择下载app.crx文件，在chrome中打开chrome://extensions/页面...
web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一
cevent的博客
01-19 1855
1.先看效果图 2.less自定义样式 *{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-d
web前端：自定义视频播放器，原生js实现窗口自适应，视频/音量进度条应用
cevent的博客
02-01 1544
1.less页面包装，引用混合 //导入播放器基础css @import "reset.less"; //定义进度条混合 .progress-bar-position() { position: relative; } .progress-bar-line() { //定位：位置不变 position: absolute; //进度条：height：3px BG：#737373 width: 100%; height: 3px; //总高25，这里是
web前端：canvas绘制画布，文本居中，获取像素点getImageData、放入像素数据putImageData，图文详解
cevent的博客
01-26 1327
1.canvas-font居中图解 2.canvas像素计算pixel图解 3.less * { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画
html中定义动画名字和规则,CSS3-animation属性和@keyframes规则
06-10
1. 在CSS样式表中使用@keyframes规则定义动画效果。 例如，定义一个从左到右移动的动画： ```css @keyframes move-left-to-right { from {left: 0;} to {left: 100px;} } ``` 2. 在CSS样式表中使用animation-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值