标签: css-animations

我刚刚发现了一个GitHub Repo,其上有一个很酷的引发动画button,但对于Android.

这是Animation:

但是,我希望我的网站,所以我开始自己设计.

首先,我按帧拆掉了gif.然后,通过这些观点,我制作了一个路线图,这是我在编写代码时所遵循的:

• 这颗星逐渐scale()消失了.
• 一小圈橙色逐渐覆盖了恒星scale().
• 另一个小圆圈,但这次background-color(白色,在这种情况下),也逐渐覆盖前一个圆圈scale().
• 随之scale()而来的是星星也会再次出现(因此,我要增加z-index),这次是橙色(表示其选定的状态).
• 新星的四周散落着另一个小圆圈.

这是我到目前为止所做的:

svg {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  transition: 0.5s;
  fill:gray;
}

svg:hover {
  animation: up-svg 1s;
  fill: darkorange;
  z-index: 1;
}

svg:hover~.svg {
  animation: up-one 0.5s;
  display: block;
}

svg:hover~.svg1 {
  animation: up-two 1s;
  display: block;
}

.svg {
  position: absolute;
  top: 0; …

我需要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立方体,我正在使用上/下和左/右键旋转,但我在旋转方向上遇到了问题.

尝试#1

DEMO

使用本文,我设法绑定键并将旋转应用于多维数据集.我的第一个问题是CSS transform函数旋转元素轴,所以,即.我按下,Y轴和Z轴改变位置.我为这种情况调整了原始代码,但另一个问题是,因为轴是向量,当我按下2次X和Z回到位但矢量被反转(左键开始向右旋转立方体,反之亦然),所以现在我必须在相反的方向旋转立方体以获得所需的结果,我不知道如何检测轮轴是否倒置.

JavaScript的

var xAngle = 0,
    yAngle = 0,
    zAngle = 0,
    cube = $("#cube");

$(document).keydown(function(e) { //keyup maybe better?

  e.preventDefault();

  var key = e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40},
      x = xAngle/90,
      y = yAngle/90;

    switch(key) {
      case arrow.left:
        if (x%2 == 0)
          yAngle -= 90;
        else
          zAngle += 90;
      break;
      case arrow.up:
        if (y%2 == 0)
          xAngle += 90;
        else
          zAngle -= 90;
      break;
      case arrow.right: …

我试图通过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; …

我有以下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 …