css动画之上下晃动的div

在线动画地址

https://animista.net/play/attention/pulsate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="square" class="container animated">上下晃动</div>
</body>
<style>/*** transform-origin 设置旋转元素的基点位置* animation-name 设置动画名称* animation-duration 设置动画时间* animation-fill-mode 设置播放后的状态* animation-iteration-count 设置循环播放的次数* transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2* transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动** 需要注意：transform: translate3d 不等于 transform: translateZ*/.animated {animation-duration: 1s; /*动画时间*/animation-fill-mode: both; /*播放后的状态*/}.animated {animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/}.animated {animation-duration: 2s; /*动画时间*/}.container {background: #2D97DB;width: 90%;height: 90%;padding: 100px;margin: 20px auto;font-family: "微软雅黑";font-size: 40px;color: white;text-align: center;line-height: 90%;}.container:hover{animation-name:container; /*动画的名称*/transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/cursor: pointer;}@keyframes container{0%,100%,20%,50%,80% {transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/transform: translate3d(0,0,0); /*设置只在Z轴上移动*/}40%,43%{transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);transform: translate3d(0,-30px,0);}70%{transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);transform: translate3d(0,-15px,0);}90%{transform: translate3d(0,-4px,0);}}
</style>
</html>

记录一下以防后面需求有用到

css动画之上下晃动的div相关推荐

css阵列,在阵列上重置CSS动画
尝试在页面上按下复选框时重置css动画.它适用于单个div,但我想让它在同一时间适用于所有div,所以我使用了for.问题只是最后的div复位.我究竟做错了什么?任何帮助赞赏.在阵列上重置CSS动画 ...
每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...
css3动画特效：上下晃动的div
css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

css动画之上下晃动的div

css动画之上下晃动的div

css动画之上下晃动的div相关推荐

最新文章

热门文章