css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...

我想制作一个帆船动画。它有效，但它不是一个流畅的动画。它停止在我在@keyframes中做出的每个更改中。我正在使用transform:rotate(-5deg)，然后更改为5deg以模拟波浪效果，同时我使其移动更改“左”值，但结果非常糟糕。我错过了哪些css代码让我的动画顺畅运行？为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？

这里是代码：

div {

width: 150px;

height: 150px;

top: 20px;

background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');

position: relative;

background-size: cover;

animation: mymove 5s linear infinite alternate;

transform: rotate(0deg);

transform:translate3d

transition: all;

}

@-webkit-keyframes mymove {

from,

20% {

trans: -2%;

transform: rotate(5deg)

}

20%,

30% {

left: 20%;

transform: rotate(-5deg)

}

40%,

50% {

left: 40%;

transform: rotate(5deg)

}

60%,

70% {

left: 60%;

transform: rotate(-5deg)

}

80%,

90% {

left: 80%;

transform: rotate(5deg)

}

90%,

100% {

left: 100%;

transform: rotate(-5deg)

}

删除代码如20％，并保持20％{} –

你有一个20％然后又一个20％和30％。尽量保持百分比分开。 –

谢谢你的回复！我改变了由逗号分隔的2个百分比，并且每次更改仅使用1个百分比进行动画更改。现在它移动顺利.. –

css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...相关推荐

css3 keyframes 取消动画,CSS3 @keyframes简单动画实现
CSS3 @keyframes简单动画实现定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CS ...
html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
CSS3知识点整理（三）----变形与动画
一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
html页面加载动画尺寸,6种CSS3加载动画
插件描述:6种CSS3炫酷预加载Loading,非常酷的纯CSS3炫酷预加载Loading指示器动画特效.这组loading指示器共6种效果,都是使用:before和:after伪元素,以及CSS帧动 ...
CSS3的transform之3d转换、CSS3动画
文章目录前言一.perspective属性和transform-style属性二.transform之3d转换 transform之translate3d(x,y,z)平移 tranform之r ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...

css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...

css3 keyframes 取消动画,为什么我的CSS3动画使用@keyframes在每个百分比范围内停止几毫秒？...相关推荐

最新文章

热门文章