CSS - 左右摇曳摆动动画（无限循环）

效果图

代码

@-webkit-keyframes zy{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); }
}

/* 使用 */
.content {animation: zy 2.5s .15s linear infinite;animation: zy 2.5s .15s linear infinite;animation: zy 2.5s .15s linear infinite; animation: zy 2.5s .15s linear infinite;
}/* 兼容写法 */
animation: zy 2.5s .15s linear infinite;
-moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
-webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
-o-animation: zy 2.5s .15s linear infinite; /* Opera */

CSS - 左右摇曳摆动动画（无限循环）相关推荐

css动画无限循环转圈,css3 – 具有无限循环的链CSS动画
简而言之,没有(一些可以解决的问题) 你的行动画计数:infinte当前正在做的是元素:动画:ani1 3s 0s无限,ani2 3s 9s无限;因此,由于声明的第一个动画的迭代次数为无限,因此永远不 ...
微信小程序动画无限循环掉花
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 动画效果源码 <block wx:if="{{donghu ...
Android实现箭头无限循环上升的简单动画
需求说明一个箭头图片在某个区域做上升的动画,到区域顶部时,消失的部分又从底部出现,如此循环往复. 先看实现的效果图,如下. 缺点:实际上并不是连贯的循环重复,而是第二次上升的箭头消失并没有再从底部出 ...
CSS3旋转动画(平滑,无限循环)
CSS3旋转动画 /* 旋转动画指定class为trun即可使用*/ .turn {animation: turn 10s linear infinite; }/* turn : 定义的动画名称 1 ...
用CSS来做一个动画案例
今天来做这么一个案例添加一个动画实现上下渐变滚动的效果首先还是我们HTML部分,一个大盒子装着五个子元素下面别在意,之前写的时候看到有个网站有这么个注解我就复制了下来哈哈哈 <div cl ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例
1. 需求一张图片从左向右无限循环移动 2. 代码由于是应用在移动端,故使用rem单位,后面问题也发生在这. HTML CSS .dog { width: 5.4rem; \\图片宽度 heigh ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
CSS - 音乐盒 360° 无限循环旋转动画（元素转圈）
前言由于 Gif 图片过小的问题,显得很不流畅,真实情况下很流畅,放心. 实现一个 360° 无限循环旋转的动画,如下图所示: 示例代码注意:通过 animation 复合属性,可控制动画旋转速度 ...

CSS - 左右摇曳摆动动画（无限循环）

效果图

代码

CSS - 左右摇曳摆动动画（无限循环）相关推荐

最新文章

热门文章