我有以下代码:http://jsfiddle.net/odj8v0x4/.
function stopGlobe() {
$('.mapfront').removeClass('mapfront-anim');
$('.mapback').removeClass('mapback-anim');
}
function startGlobe() {
$('.mapfront').addClass('mapfront-anim');
$('.mapback').addClass('mapback-anim');
}@keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
}
}
@-webkit-keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@-webkit-keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
} …我有一个关键帧动画,有多个步骤:
@keyframes rotateLeftSideCustom {
0% {
}
40% {
-webkit-transform: rotateY(-15deg);
transform: rotateY(-15deg);
opacity: .8;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: scale(0.8) translateZ(-200px);
transform: scale(0.8) translateZ(-200px);
opacity: 0;
}
}
.section-animation {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
animation: rotateLeftSideCustom 0.6s both ease-in;
}
有什么办法可以用JavaScript来设置动画的进度吗？
例如:
document.querySelector('.section-animation').animationState('40%');
上下文:我正在尝试构建一个可拖动的界面,我需要将动画的进度与用户拖动的数量对齐.
我需要从视频/流中提取关键帧.所以有任何标准实现.我正在使用开放式简历.(目前我每秒都在提取帧数,这比我需要提高性能要慢.)因此,如果任何一个优化了实现,请在这里回复.
我有这样的彩色,动画,垂直线:
@keyframes colored {
0% {
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 …我正在尝试做一个纯HTML/CSS倒计时动画,但我很难让它顺利运行.现在我只是在几分钟和几秒钟之内.请注意,我正在使用animation-delay属性将我的倒计时重置为某个初始时间.
现在一切正常,除了对应于x10分钟的数字,它没有改变与其余数字的同步.下面我将粘贴我的代码和两个codepens,第一个正常版本具有正常行为的正确时间,另一个正常版本快10倍,因此您可以快速了解问题.
@keyframes tick6 {
0% { margin-top: 0; }
16% { margin-top: -2rem; }
33% { margin-top: -4rem; }
50% { margin-top: -6rem; }
66% { margin-top: -8rem; }
83% { margin-top: -10rem; }
100% { margin-top: -12rem; }
}
@keyframes tick10 {
0% { margin-top: 0; }
10% { margin-top: -2rem; }
20% { margin-top: -4rem; }
30% { margin-top: -6rem; }
40% { margin-top: -8rem; }
50% { margin-top: -10rem; } …我正在尝试将动画制作为涟漪效果。它似乎在 chrome 浏览器上运行良好，但在 safari 上不起作用，我在同一页面中还有其他动画，它们在 chrome 和 safari 上都运行良好，但不是这个。我想知道我做错了什么。
我尝试调试它，我可以看到 Safari 图形选项卡中有一条消息说
“这个动画没有关键帧”
我的CSS代码：
.ripple-animation {
&::after {
@include rings(2s, 40s);
}
&::before {
@include rings(2s, 40s);
}
}
@mixin rings($duration, $delay) {
opacity: 0.5;
// display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
top: -8px;
left: -10px;
right: 0;
bottom: 0;
content: '';
height: 120%;
width: 110%;
border: 4px solid rgba(0, 0, 0, 0.4);
border-radius: 100%;
-webkit-animation-name: ripple;
-webkit-animation-duration: $duration;
-webkit-animation-delay: $delay;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.65, 0, …我有几个链接到一个div的CSS3动画,但我只想在最后一个动画结束时使用一个函数.
我已经使用了animationEnd事件,因此我可以触发所述函数,但正如我所说,我只想让它在最后一个动画上运行.
有没有办法通过检查已触发animationEnd事件的动画的名称来检测动画？
因此允许我使用if语句来挑出最后一个动画.
我有一个如下所示的 CSS 关键帧，我的问题是我想将它设置为 JavaScript（放入已经有一些函数的 div），以便我可以将“元素”值返回给我的函数
.cylon-eye {
background-color: yellow;
background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}我尝试按照建议进行如下转换，我应该调用的返回值是var cylon-eye = document.getElementById("cylon-eye");？
<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else …我的项目将显示一个阳光明媚的领域和一个复选框，上面写着“让它下雨”。单击按钮后，太阳落山，云彩进来，并且会有动画 CSS 雨。我正在使用已检查的伪类来启动下雨动画和太阳的旋转。
如何反转未选中状态的动画？
页面的工作顺序如下：
pseudo class:checked被激活并开始动画现在，它只是在取消选中按钮时重置整个页面。有没有办法在不使用任何 JavaScript 的情况下将动画反转到它的原始状态？这个项目只有 CSS。
.sky {
height: 70%;
width: 100%;
position: absolute;
z-index: 1;
background: #e4f5fc;
/* Old browsers */
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 33%, #9fd8ef 86%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4f5fc), color-stop(33%, #bfe8f9), color-stop(86%, #9fd8ef));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 33%, #9fd8ef 86%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4f5fc 0%, #bfe8f9 33%, #9fd8ef 86%);
/* Opera 11.10+ */ …使用 css@keyframes我试图在单击元素时将一些动画附加到元素上。
.animate {
animation-name: action;
animation-duration: 2s;
animation-timing-function: linear;
background-color: green;
}
@keyframes action {
0% {
background-color: gray;
}
50% {
background-color: red;
}
100% {
background-color: green;
}
}
在.animate类上点击，并将盒子从灰色动画绿色。但是现在我想再次单击它时将动画恢复为灰色（切换功能）。我尝试使用相同的动画，animation-direction: reverse但没有播放动画。动画最初不应该播放（我遇到过几次）。任何建议我如何实现这一目标？