有没有办法在SASS中编写关键帧？
我发现的每个例子实际上都是SCSS,即使它说的是SASS.要清楚,我的意思是没有大括号的那个.
我想让整套动画永远发挥.当最后一张照片消失时,我希望第一张照片再次出现.我所做的(我不喜欢)将页面设置为在最后一张照片淡出时重新加载.还有其他方法可以使用css ???
<html>
<head>
<style>
.content{
height: 400px !important;
/*margin: auto !important;*/
overflow: hidden !important;
width: 780px !important;
}
.imgholder{
height: 400px;
margin: auto;
width: 780px;
}
.photo1{
opacity: 0;
animation: fadeinphoto 7s 1;
-moz-animation: fadeinphoto 7s 1;
-webkit-animation: fadeinphoto 7s 1;
-o-animation: fadeinphoto 7s 1;
float: left;
position: relative;
top: 0px;
z-index: 1;
}
.photo2 {
opacity: 0;
animation: fadeinphoto 7s 5s 1;
-moz-animation: fadeinphoto 7s 5s 1;
-webkit-animation: fadeinphoto 7s 5s 1;
-o-animation: fadeinphoto 7s 5s 1;
float: …使用关键帧,可以在元素插入DOM时立即对其进行动画处理.这是一些示例CSS:
@-moz-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
#box {
-webkit-animation: fadeIn 500ms;
-moz-animation: fadeIn 500ms;
animation: fadeIn 500ms;
}
是否有一些类似的功能可以在从DOM中删除之前将动画(通过CSS,没有JavaScript)应用于元素？下面是我用这个想法玩的jsFiddle; 如果您知道解决方案,请随意分叉.
jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/
我有一个div,我在其中制作动画内容:
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: …我有一段JS代码来生成随机数,并将它们作为变量输出,以代替旋转值
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}
上面的代码工作正常,但是当我尝试将javascript中的变量粘贴到rotate(variable);我无法使其工作时.我是新手,所以我90%肯定我只是没有正确的变量语法(严重的是我很难记住,如果有东西需要括号,引号,波浪等等,我已经尝试了所有我能想到的) .
或者可能是因为变量是函数的本地变量而CSS无法读取.
所以基本上我只需要一些陌生人来告诉我正确的语法以及如何在可能的情况下让CSS读取变量.
否则看起来我将需要该函数来创建整个:
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
...由于随机变量可能会应用于多个css元素,因此可能有点混乱.
哦,目前变量被格式化为包含deg数字之后,这不是问题.事实上,为了方便起见,我假设我使用var dogValue ="20deg"; 并忘记随机元素.
谢谢.
我们需要将大型实时WMV视频源分成大小相同的小块.我们创建了一个可以正常工作的脚本,除了一件事:视频块不是以关键帧开始的,所以当播放大多数视频块时,它们不显示任何图像,直到原始视频的关键帧最终到达.
有没有办法让ffmpeg让输出视频以关键帧开始？
以下是我们的命令行现在的样子:
ffmpeg.exe -i "C:\test.wmv" -ss 00:00:00 -t 00:00:05 -acodec copy -vcodec copy -async 1 -y "0000.wmv"
ffmpeg.exe -i "C:\test.wmv" -ss 00:00:05 -t 00:00:05 -acodec copy -vcodec copy -async 1 -y "0001.wmv"
等等...
我想将输入视频的关键帧间隔设置为5秒.只有这样我才能使用FFmpeg实现恒定的5秒HLS分割.如何使用FFmpeg将关键帧间隔设置为5秒？(FFmpeg提示行代码赞赏)
我正在设置一个简单的动画,当您将鼠标悬停在图像上时会显示一些附加信息.jQuery备份部分编写并且工作正常,但我遇到的问题是当用户徘徊时让CSS3动画反向运行.
因此,当你在它中盘旋时效果很好,但只要你徘徊,元素就会消失.我想知道的是,当鼠标在其他地方徘徊时,是否有办法让它们向后动画.非常感谢!
#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
#recent-work div:hover .recent-project-type {
animation-name: showType;
animation-duration: .5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
-moz-animation-name: showType;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease;
-moz-animation-delay: 0;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-play-state: running;
-webkit-animation-name: showType;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
top: 0;
}
#recent-work div:hover .recent-project-title {
animation-name: showTitle;
animation-duration: .5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: …如何检查视频文件的关键帧间隔？
我在ffmpeg输出中看到的只有:
Metadata:
metadatacreator : Yet Another Metadata Injector for FLV - Version 1.8
hasKeyframes : true
hasVideo : true
hasAudio : true
hasMetadata : true
canSeekToEnd : true
datasize : 256600272
videosize : 210054362
audiosize : 45214634
lasttimestamp : 5347
lastkeyframetimestamp: 5347
lastkeyframelocation: 256649267
Duration: 01:29:07.24, start: 0.040000, bitrate: 383 kb/s
Stream #0:0: Video: h264 (High), yuv420p, 720x304 [SAR 1:1 DAR 45:19], 312 kb/s, 25 tbr, 1k tbn, 50 tbc
Stream #0:1: Audio: mp3, 44100 Hz, mono, s16p, 64 …我想在一个循环中的图像之间淡出(比如这里的结果-jsfiddle.net/5M2PD)但纯粹通过CSS,没有JavaScript.我尝试使用关键帧,但我没有成功.请帮忙.
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}