标签: css-animations

我需要8种不同的CSS3动画,这些动画太相似了,所以我使用了LESS.下面是代码,它完美地运行,带有一个小故障 - @name变量.

.animation_top (@name, @pxFrom, @pxTo) {
    @-moz-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-webkit-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-ms-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }
}

因为css关键帧是由@符号启动的,所以LESS只是忽略@name的变量.有没有办法如何逃脱关键帧@符号或迫使LESS以某种方式正确渲染@name？

CSS3动画在IE9中不起作用.这是jfiddle链接.是否有可能让他们在IE上工作或者我犯了一些愚蠢的错误？这是不起作用的代码:

@-ms-keyframes rotating {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}

#rotateMe{
  -ms-animation: rotating 5s linear infinite;
}

由于IE doent支持此功能,我使用jquery rotate插件创建了回退

这是我的IE后备功能:

$(function() {
    if (!$.support.transition){
        var angle = 0;
        var angle2 = 0;
        setInterval(function(){
              angle+=0.3;
              angle2-=0.3;
             $(".rotateRing").rotate(angle);
             $(".rotateRingReverse").rotate(angle2);
        },50);
    }
});

是否可以@keyframes使用javascript,jQuery或其他方法获取/设置CSS3 动画的当前动画百分比？

比如说有一个div叫做类的类.spin,它只是使用一个也被称为的关键帧在一个圆圈中旋转spin.

1. 我试图让使用动画的当前百分比值$('.spin').css('animation'),$('.spin').css('animation: spin')以及其他一些方法,但他们都警觉空

2. 我也有兴趣在每个关键帧预定义%改变原有的动画,我曾尝试喜欢的东西$('.spin').css('animation', '..new definition here...'),并$('.spin').css('spin', '50%', '...new definition here...)没有用.

有任何想法吗？

将字体更新为现有字体

我已经在我们的网站上使用了5个icomoon字体,这些字体是从icomoon下载的.我想要包含2个以上的字体.我该怎么办？

我可以将新的2种字体添加到现有字体吗？如果是,我该如何添加它们？

我试图通过css中的关键帧和动画将最小化/最大化效果应用于div.虽然简单的,非动画的效果本身很简单(我已经添加了它),但对于关键帧的起点(来自{...})的需求让我很生气!我已经尝试过使用空的属性,使用虚拟的非相关属性(如不透明度:1,不需要不透明度)或使用所需属性的自动值,但到目前为止我没有运气.所以我的问题是,有没有办法设置一个关键帧,所以它从div的当前属性值开始？更具体地说,我可以将div的宽度和高度从它的CURRENT,generic,width和height开始扩展到给定的大小吗？

到目前为止我的代码(效果相关代码):

@-webkit-keyframes maxWin{
    from 
    {
        /* width: auto; or width: ; or nothing at all   */
        /* height: auto; or height: ; or nothing at all */
        /* left: auto; or left: ; or nothing at all     */
        /* top: auto; or top: ; ...you know.            */
    }
    to
    {
        width:  100% !important;
        height: 100% !important;
        left: 0px !important;
        top: 0px !important;
    }
}
@-webkit-keyframes minWin
{
    from
    {
        /*width: auto; or width: ;*/
        /*height: auto; or height: ;*/ …

我使用css3为SVG创建了一个动画,它在Chrome和Firefox中完美运行.它部分在Safari中工作但不能在Internet Explorer中工作(支持css动画的IE9 +)

见演示

CSS:

@-webkit-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-ms-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-moz-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0; …

我尝试让插入符号在下面旋转180度点击我的下拉菜单.在我试图实现的解决方案中,它将插入符号的类更改为切换或在单击时切换.我第一次点击它会向上旋转,第二次它立即返回到它的起始位置然后再向上旋转.我闻到了脏代码,最简单的方法是添加这个切换旋转动画.在此先感谢您的帮助.
继承我现在的css:

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

我有以下css规则:

button:hover:after {
    content: ' ' attr(title);
}

基本上该按钮具有作为内容和标题属性的fontawesome图标.当您将鼠标悬停在按钮上时,它会添加一个空格,然后将标题添加到按钮的内容中.看到这个JSFiddle

现在问题是,我将如何设置动画？我希望按钮的新宽度是动画的,所以它不会显示为静态和丑陋.

我有这样的彩色,动画,垂直线:

@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示例包含两张图片; 一个背景,另一个是对象.两者都使用缩放和旋转动画.在全高清显示器上,它往往是不连贯的.当你在Firefox中观察它的性能时它大约需要20 fps.

首先我使用jQuery; 提高性能我选择了CSS,但它仍然不完美.为了重现问题,请转到全屏.我怎样才能让它变得更好？

.html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #121212;
}

.maincontainer {
  width: 100%;
  padding-bottom: 100%;
  position: fixed;
  overflow: hidden;
}

.bg {
  background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: -99;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.bg2 {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: -99;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
} …