我试图使用SASS混音自动使用供应商前缀的动画。这是混合器：
@mixin keyframes($name) {
@-o-keyframes $name { @content };
@-moz-keyframes $name { @content };
@-webkit-keyframes $name { @content };
@keyframes $name { @content };
}
如果我像这样把它包括在内：
@include keyframes(test) {
from {
opacity: 0;
}
t
浏览 3提问于2014-09-10得票数 5
回答已采纳
2回答
有没有人有关于LESSCSS和@keyframes或@-ms-keyframes的问题？它编译了适用于@-webkit-keyframes、@-moz-keyframes和@-o-keyframes的CSS。
浏览 1提问于2011-12-01得票数 3
回答已采纳
1回答
有关键帧错误@ GSC。下面是我尝试过的：
我把代码中的“背景位置”改成了“不透明”，然后背景错误就消失了。
但是现在，当我把关键帧放进去的时候，它会说：
标记‘styleamp-keyframe’如果存在，必须是标记'body‘的最后一个子级。
这是关键帧代码：
<style amp-keyframes>
@keyframes left_scroll{from{opacity: 1;}to{opacity: 1;}}
@-webkit-keyframes change{0%{opacity: 1;}50%{opacity: 1;}}
@keyfra
浏览 17提问于2021-02-21得票数 0
我目前有一个简单的关键帧混音，如下所示：
@mixin keys($animationName) {
@-webkit-keyframes $animationName {
@content;
}
@-moz-keyframes $animationName {
@content;
}
@-ms-keyframes $animationName {
@content;
}
@-o-keyframes $animationName {
@content;
}
@keyframes $animationName {
浏览 4提问于2015-09-11得票数 1
回答已采纳
CSS前缀的关键帧是否可以堆叠，只要它们中不包含任何前缀特定的属性？
常见
@-webkit-keyframes myAnimation{
to{ opacity:0; }
}
@-moz-keyframes myAnimation{
to{ opacity:0; }
}
@keyframes myAnimation{
to{ opacity:0; }
}
堆叠
@-webkit-keyframes myAnimation, @-moz-keyframes myAnimation, @keyframes myAnimation{
to{ opacity:0; }
}
浏览 4提问于2013-09-06得票数 1
回答已采纳
我已经试过了
$prefixes: ("-webkit-","-moz-", "-o-", "");
@mixin keyframes($name) {
@each $prefix in $prefixes {
@#{$prefix}keyframes #{$name} { @content; }
}
}
和
@mixin keyframes($name) {
@-webkit-keyframes #{$name} { @content; }
@-moz-keyframes #{$n
浏览 0提问于2012-04-29得票数 5
回答已采纳
2回答
我有以下关键帧混合，但它似乎是生成无效的CSS：
@mixin keyframes($animationName)
{
@-webkit-keyframes $animationName {
@content;
}
@-moz-keyframes $animationName {
@content;
}
@-o-keyframes $animationName {
@content;
}
@keyframes $animationName {
@content;
}
浏览 2提问于2014-12-12得票数 8
回答已采纳
我在SCSS中使用以下关键帧混音
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
当我必须动画时，它完美地工作，它具有animation属性，但是当我试图将它
浏览 0提问于2013-07-19得票数 1
回答已采纳
1回答
我有一个CSS动画，我看不出有什么问题。它有两个部分，首先是“淡出”，然后是“移动”。不起作用的部分是“移动”动画。令人惊讶的是，完整的动画可以在Microsoft Edge上运行，但在其他所有浏览器中都会失败，例如Chrome，Firefox和Opera。谁能告诉我我哪里出错了？
#about {
visibility: hidden;
-webkit-animation: fadein1 .5s, move1 .5s;
-moz-animation: fadein1 .5s, move1 .5s;
-o-animation: fadein
浏览 32提问于2017-02-08得票数 1
回答已采纳
我想用@keyframes来调整CSS中的特定-rule。下面的代码很好地实现了这些功能：
CSS：
@-webkit-keyframes changecolor {
0% { color: red; }
100% { color: green; }
}
@keyframes changecolor {
0% { color: red; }
100% { color: green; }
}
JavaScript：
function getKeyframeRule(ruleName) {
var ss = document.styleSheets,
浏览 4提问于2015-07-27得票数 4
回答已采纳
1回答
我试图在崇高文本2中创建我自己的主题来突出CSS语法。我只剩下keyframes了。
@-webkit-keyframes spin { /* some rules */ }
@-moz-keyframes colorize { /* some rules */ }
@-ms-keyframes spin { /* some rules */ }
@-o-keyframes spin { /* some rules */ }
@keyframes colorize { /* some rules */ }
我希望突出显示初始的@和单词keyframes，而不突出显示引擎前缀，如-web
浏览 2提问于2015-03-04得票数 0
回答已采纳
我有一个较少的混入：
.keyframes (@name, @fromRules, @toRules) {
@-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
@keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
}
例如，我调用：
.keyframes(fade-in,
{
opacity: 0;
},
{
浏览 1提问于2014-09-26得票数 0
2回答
目前，有一种为CSS动画编写浏览器属性的通用方法：
@-webkit-keyframes wheel-keyframes {
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
@keyframes wheel-keyframes {
100% {
浏览 0提问于2014-10-19得票数 0
回答已采纳
1回答
是否可以使用以下代码：
@-webkit-keyframes animationame, @keyframes animationame {
blablabla
blabla
bla
}
而不是这样：
@-webkit-keyframes animationame {
blablabla
blabla
bla
}
@keyframes animationame {
blablabla
blabla
bla
}
浏览 0提问于2016-05-31得票数 0
这是我正在尝试生成的标准CSS，但我想使用SASS Mixin来完成这项工作。
标准CSS
@-webkit-keyframes crank-up {
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
100% { transform
浏览 2提问于2013-11-23得票数 10
回答已采纳
1回答
我正在尝试使用一个混音自动前缀@keyframes
@mixin keyframePrefix($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
这在技术上可行，但它很大。对于单个属性，我有一个前缀混合器，它使用@each语句使其更加紧凑：
$prefixes: ("-moz-"
浏览 9提问于2017-04-13得票数 0
回答已采纳
1回答
我一直在寻找一个可以创建前缀的键框声明的混合器，但是如果没有丑陋的修复，我就找不到任何实际工作的东西。
到目前为止，我已经成功地创建了以下混合内容：
.keyframes(@identifier, @animation) {
.frames { content: ~"'';} @-webkit-keyframes @{identifier} {@{animation}} @-moz-keyframes @{identifier} {@{animation}} @-ms-keyframes @{identifier} {@{animation}} @-o-keyfra
浏览 1提问于2015-11-10得票数 0
3回答
我有一个元素，它应该在页面加载时呈现：
{this.state.pageLoaded && <MyComponent className={classes.container} /> }
当这个组件被渲染时，我希望它淡入。因此，我正在尝试应用一些jss，但不能让它完全工作。
这是我的JSS：
const styles = theme => ({
'@keyframes fadein': {
from: { opacity: 0 },
to : { opacity: 1 }
},
/*
浏览 0提问于2019-06-20得票数 0
我对下面的代码有问题。使用进行测试我已经意识到，它可以用于SASS版本3.3，但不能用于版本3.4。我应该如何更改代码，使其与当前版本一起工作。
@mixin keyframes ($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@include keyframes(move-up)
浏览 2提问于2017-05-23得票数 0
2回答
是否有可能使用纯javascript来检测用户在页面上的哪个位置滚动以触发关键帧？
.animations {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
to {
浏览 4提问于2015-03-20得票数 1
我试图通过生成我自己的前缀版本来解决不支持@keyframe的问题，使用如下的Sass循环：
$list: '' -ms- -webkit- -moz- -o-
$at: @ //at sign
@each $prefix in $list
#{$at}#{$prefix}keyframes moveclouds
from
#{$prefix}transform: translateX(2400px)
to
#{$prefix}transform: translateX(-400px)
并期望生成css：
@keyframes m
浏览 0提问于2012-12-29得票数 6
回答已采纳
这是我们的网站。向下滚动以查看动画。
如果你在Chrome上查看它，它会按预期工作。但当我在IE11上查看它时，矢量图像大小是错误的。此外，在Firefox中，高度动画不起作用。
这是动画关键帧:这些是在你不知道的情况下。
@header-height : 10em;
@header-height-shrink : @header-height/2;
@-webkit-keyframes animeHeaderBGShow {
from{
opacity:0;
}
to {
opacity:100;
}
浏览 0提问于2014-09-30得票数 0
这里是标准的CSS，我正在努力生产，但希望使用较少的米辛来做这项工作。您可以使用纯css 检查工作演示。
纯CSS
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transfo
浏览 6提问于2014-12-28得票数 0
0回答
每当我上传一个用于动画目的的精灵地图集到overlaps2d版本0.1.2-快照的场景中。我的应用程序崩溃，并显示以下代码行(略有修改)：
java.lang.NoSuchMethodError: No virtual method getKeyFrame(F)Lcom/badlogic/gdx/graphics/g2d/TextureRegion; in class Lcom/badlogic/gdx/graphics/g2d/Animation; or its super classes (declaration of 'com.badlogic.gdx.graphics.g2d.
浏览 2提问于2017-01-05得票数 2
回答已采纳
我有一个基本的scss文件，其中包含以下内容：
@keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fade{
0% { opacity: 0; }
100
浏览 4提问于2015-04-22得票数 2
1回答
有没有办法在每次迭代之间增加延迟？
例如:我想添加2s的第一个延迟和10s的迭代延迟
下面是一些代码：
代码：
/* PROCESSAR AQUI! */
/*...*/
/* KEYFRAMES */
@-webkit-keyframes transitdescription {
15% { margin-left: 45px;}
}
@-webkit-keyframes transitimage {
0% { right: -100%;}
10% { right: -webkit-calc(93% - 350px);}
25
浏览 2提问于2013-03-24得票数 1
1回答
我想从代码背后创建一个故事板，我想从代码背后实现下面的故事板， <Storyboard x:Name="Counter_Animation">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtCounter" Storyboard.TargetProperty="(TextBlock.Text)">
<DiscreteObjectKeyFrame KeyTime="00:00:01" Valu
浏览 16提问于2020-04-27得票数 0
回答已采纳
有没有可能将所有浏览器兼容的标签(如-webkit, -moz, -ms, -o )组合成一种样式？举个例子：
@-webkit-keyframes pulsate,
@-moz-keyframes pulsate,
@-ms-keyframes pulsate,
@-o-keyframes pulsate,
keyframes pulsate {
from {opacity: 1 }
to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
浏览 5提问于2014-07-23得票数 1
1回答
我已经将这种方法拼凑在一起，以便使用LESS生成以供应商为前缀的属性和动画。首先是一些工厂函数：
.vendorprefix (@property, @value) {
-webkit-@{property}: @value;
-moz-@{property}: @value;
-ms-@{property}: @value;
-o-@{property}: @value;
@{property}: @value;
}
.keyframes(@name; @animation) {
@animation();
@-webkit-keyf
浏览 1提问于2015-04-02得票数 0
我用-webkit前缀制作了一个动画，效果很好。这是代码：
.popuptext.show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeinout 5s;
animation: fadeinout 5s;
}
@-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
@keyframes fadeinout {
50% { opacity: 1; }
}
现在，我想添加其他前缀，以使动画与其他浏览器兼容，但我不知道如何做到。
浏览 4提问于2022-08-28得票数 0
回答已采纳
我可以在图像上做淡出效果，但是，效果之后，图像仍然显示在屏幕上。我想让它在2s淡出效果后变成display: none;。怎么做呢？
document.getElementById("imgX").style.animation = "fadeout 2s";
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
@-moz-keyframes fadeout {
from { opacity:
浏览 8提问于2017-06-19得票数 2
回答已采纳
在下面的示例中，一个动画将完成，另一个动画将继续(因为playState不等于完成)：
const keyframes = new KeyframeEffect(null, [
{ // from
opacity: 0,
},
{ // to
opacity: 1,
}
], {duration: 2000, easing: 'ease'})
{
const anim = new Animation(
keyframes,
document.timeline
)
浏览 15提问于2021-05-17得票数 0
回答已采纳
1回答
处理中的插值函数
、、、、
我是一个新的处理新手，我正在尝试在处理中使用lerp函数。基本上我想做的是，点击屏幕上的不同点，这些位置被存储在一个数组中。当用户单击enter时，将重放存储的移动，同时ellipse在点之间平滑移动。我的问题是，当我点击enter时，我得到了“0的算术异常”。你能告诉我我错过了什么吗？谢谢。
final static int numFrames = 30; //frames between keyframes
final static int numKeyFrames = 1; //frames between keyframes
Point[] keyFrames;
Point[] fra
浏览 14提问于2017-02-26得票数 0
我试着把一个更“先进”的混音从SASS转换成更少但不成功的混合。
这是混合器：
.breakpoint(@point) {
@if @point == really big{
@media (max-width: 80em) { @content; }
}
@if @point == mid {
@media (max-width: 60em) { @content; }
}
@if @point == small {
@media (max-width: 42em) { @content; }
}
}
另外一个，我没有碰这个：
@mixi
浏览 0提问于2014-10-07得票数 3
回答已采纳
1回答
我已经意识到，我不可能简单地完成下面的相同的代码通过分离通过昏迷@keyframes mymove, @-moz-keyframes mymove, etc..。为了让他们工作，我需要分别声明如下。
是否有任何方法对它们进行分组并使代码更短？
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
浏览 0提问于2011-08-09得票数 3
1回答
我的@keyframes动画在IE中不起作用。在网上，各种消息来源都说IE9支持它，也有人说它不受支持。有没有人确定我应该停止在那个方向上的工作…如果没有，我认为它是IE…的前缀，那么@-ms-keyframes是什么谢谢!
@-webkit-keyframes move {
0% {left: 0px;}
49% {left: 940px; opacity: 1;}
50% {left: 940px; opacity: 0;}
51% {left: -940px; opacity: 0;}
52% {left: -940px; opacity: 1;}
100% {l
浏览 2提问于2012-08-23得票数 1
回答已采纳
2回答
我刚开始接触关键帧动画，经过一番搜索，似乎是一个很好的起点。
下面是使用codepen - 编写的文章代码
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@conte
浏览 3提问于2015-10-19得票数 8
回答已采纳
我对棱角反作用和凹槽有意见。我已经做了2页，当你点击一个链接按钮，新的页面应该从右边滑入，当你比点击后，旧的页面应该从左边滑回来。
切换到新页面时的第一个动画可以工作。但是当点击回来的时候，奇怪的事情发生了，我不知道问题出在哪里。我的css看起来如下：
/* menu ------------------------ */
.menu.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
浏览 4提问于2014-12-01得票数 0
回答已采纳
1回答
我有一个问题，当在css中使用@ "Sorry, the at-rule @-webkit-keyframes is not implemented"并在css3验证中检查时，它会像这样显示错误关键帧。我想我是否需要像css一样添加pre声明。因为我是使用关键帧创建动画的新手。有没有人能给我提供一下细节？
我的代码是，
@-webkit-keyframes roll{
0% {-webkit-transform: translateX(500px) rotate(360deg);}
100% {-webkit-transform: translateX(0px)
浏览 7提问于2014-04-08得票数 2
我已经使用CSS3 transform和animation功能创建了一个动画。现在我想禁止动画在Opera上显示。
当我从css中删除特定于Opera的代码(@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}})时，动画不会在opera上自动禁用。
但是，当我删除默认动画代码(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}})时，它确实会在Opera上禁用自己。
我想在不删除默认代码的情况下在Opera上禁用它。
这是代码
@keyframes
浏览 1提问于2013-03-21得票数 0
回答已采纳
我在用银光做个钟。我试图以编程的方式设置动画代码，因为我希望对三个时钟指针中的每一个重复使用相同的代码(我认为在xaml中一个故事板无法做到这一点)。
public void Rotate(double toAngle, RotateTransform rotate)
{
Storyboard sb = new Storyboard();
DoubleAnimationUsingKeyFrames keyframes = new DoubleAnimationUsingKeyFrames();
EasingDouble
浏览 2提问于2010-08-22得票数 1
1回答
如果在某一节中应用css
、、、
如果用户在某个部分，我正在尝试添加css，但是我无法实现它。css是这样的(它为我的酒吧动画)：
.swift { width:70%; -moz-animation:swift 2s ease-out; -webkit-animation:swift 2s ease-out; }
.java { width:50%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
.python { width:60%;
浏览 1提问于2017-01-13得票数 0
回答已采纳
1回答
我有一个CSS动画，我试图根据添加到DOM节点的一个类来反转它的动画。我试过很多方法，但都没有用。下面是我使用的代码，如下所示：
// Closed state
@-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
@-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } }
@keyframes spin-close { 100% { transform:rotate(-0deg
浏览 3提问于2014-01-31得票数 3
回答已采纳
2回答
目前，过渡从左向右滑动。想知道我如何让它看起来是从上到下的吗？
下面是代码：
下面是一些css代码：
.flip {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0);
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flip
浏览 0提问于2013-06-15得票数 0
我正在使用owl carousel框架，出于某种奇怪的原因，我不明白为什么当我进入移动视图时，carousel消失了。我最初认为不透明与它有关，当我改变它时，它不会做任何事情。下面是我认为导致这个问题的代码片段：
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl
浏览 3提问于2015-01-04得票数 0
1回答
我一直看到这样的css animation代码：
@-webkit-keyframes anim{
0{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); /* Is this line needed if it is already declared below? */
-webkit-animation-timing-function: ease-in;
animat
浏览 3提问于2015-08-21得票数 0
回答已采纳
我只想用CSS来做折叠。我做过类似的事情，但它不起作用。我认为是动态高度的问题，因为当我在px中添加一个高度时，一切都正常。我该怎么办？
@-moz-keyframes collapseIn {
from {height: 0%;}
to {height: 100%;}
}
@-webkit-keyframes collapseIn {
from {height: 0%;}
to {height: 100%;}
}
@keyframes collapseIn {
from {height: 0%;}
to {height: 100%;}
}
浏览 2提问于2016-09-21得票数 1
1回答
我正在测试一些css动画，不能得到这些元素:在旋转之前，有什么帮助吗？
CSS
.footerLink{
padding:20px;
background:#000;
color:#fff;
}
.footerLink:before{
content:'ABC';
margin-right:15px;
-webkit-animation: footerHoverOff .5s ease both;
-moz-animation: footerHoverOff .5s ease both;
animation: f
浏览 2提问于2013-09-06得票数 1
回答已采纳
5回答
我想使用@keyframes，所以我这样做了：
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: action 5s infinite;
}
@keyframes action {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
但是，此代码在加载页时运行。是否有一种方法可以在特定时间使用js触发@keyframes？例如：
for (var
浏览 8提问于2021-12-02得票数 0
回答已采纳
7回答
我想创建一个结构，并将其作为数组在其他结构中使用。我的问题是我不知道我想分配多大的数组，我只知道一次我在一个函数中。我的意思是我想使用[]而不是一个预先确定的常量，比如10000。
我认为如果你看我的代码，它将是不言而喻的。你能告诉我如何让这段代码工作吗？此外，如果您能告诉我我正在询问的主题的名称(是动态数组吗？)，这将对我有很大帮助。我在哪里可以找到关于这个主题的文章/教程。
这是我在结构中思考数组的破碎方式的代码。
#include <iostream>
using namespace std;
struct keyframe {
bool a;
int b
浏览 0提问于2011-06-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
