标签: css-animations

我试图这样做,当页面加载圆圈出现,这很好,但我需要它们向外生长,从中心到小到大,而不是从左上角:

你可以看到我目前在这里:http://thomasbritton.co.uk/projects/ebrd/

理想情况下,希望这可以在CSS中完成,但如果它更容易/更稳定,可以使用JS.

有任何想法吗？

这是我的动画部分的css:

.circle a {
  border-radius: 150px;
  color: #fff;
  height: 0;
  position: absolute;
  text-decoration: none;
  width: 0;
}

.circle a.grow {
  -webkit-animation-name: grow;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: grow;
  -moz-animation-duration: 2.2s;
  -moz-animation-timing-function: ease;
  -moz-animation-iteration-count: 1;    
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

  animation-name: grow;
  animation-duration: 2.2s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@-webkit-keyframes grow {
  0% …

可能重复:
Webkit CSS动画问题 - 持久动画的结束状态？

我希望在完成运行时保持动画div的位置.现在我在鼠标悬停时动画div,但即使我仍然在它上面盘旋,div也会返回到它的位置.

有没有办法让它只在我鼠标退出时才能回来？

http://jsfiddle.net/neoswf/X5a64/

div{
    width:100px;height:100px;margin:1em;background:red
}
div:hover {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes rotateThis {
  from { -webkit-transform:scale(1) rotate(0deg); }
  to { -webkit-transform:scale(1.1) rotate(100deg); }
}?

我正在尝试添加一个无限垂直滚动的图像,就像Adam Whitcroft的精彩着陆页一样.我看过他的源代码,但我无法弄清楚他是如何把它拉下来的.我们的想法是,"我是一名科学家"的文字将出现在图像上.

我目前的代码是:

<div class="ani">
    <div class="container">
            <img src="img/Gene.png" alt="Scrolling Genes" />
        </div> 
<h3> I'm a scientist. </h3>
    <p> I worked at.... </p>        

"ani"类的CSS是:

.ani {
background: url(img/Gene.png);
color:#ecf2f9;
text-align:center;
-webkit-animation:bgscroll 20s infinite linear;
}

而对于"容器":

    .header .container {
    max-width:400px;
}

该代码(可耻地)取自我上面提到的网站.在我的生活中,我无法弄清楚如何在文本上方创建滚动图像.

谢谢非常提前很多.

假设我有三个未知高度的div,其中一个使用CSS关键帧动画生成动画背景色(请参阅http://css-tricks.com/color-animate-any-shape-2)

@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

现在,还有另外两个具有白色背景的div.在悬停时,我希望那些白色div具有动画背景颜色,与永久颜色动画同步.我知道不支持本机同步(请参阅如何跨多个元素同步CSS动画？).

我的第一种方法是让三个div都具有动画背景颜色,并用白色divs覆盖其中两个div,相对定位.在悬停时,那些白色div将变为透明并显示带有动画背景的div(请参阅http://jsfiddle.net/Vzq4B)

#permanent {
    height: …

我在这里有一段CSS

    @keyframes slidein {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    70% {
        transform: translateY(-5px);
        opacity: 0.25;
    }
    100% {
        transform: translateY(0px);
        opacity: 0.25;
    }
    }

    @-webkit-keyframes slidein {
    0% {
        -webkit-transform: translateY(30px);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-5px);
        opacity: 0.25;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 0.25;
    }
    }

    @keyframes bounce {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-5px);
        opacity: 1;
    }
    }

    @-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-5px);
        opacity: …

我正在创建一些视差滚动代码(我知道,我知道),而且我运行得很顺利,但是我遇到了一个高级用例.这是一个演示.

它现在是Chrome,Safari和FF中的60fps,这部分是因为我只是在视野中更新元素的位置.我使用这段代码检查了这个(在所说的demo的main.js中找到):

a = obj.offset + obj.height - winScroll,
b = winHeight - (obj.offset - winScroll);
if ( (a <= winHeight && a >= 0) || (b <= winHeight && b >= 0) ) {

基本上,我正在检查对象是否在这样的视图中:

如果a 或 b大于0但小于窗口的高度,那么它是可见的.

这适用于比窗口小的东西,但是那些更大的东西呢？基本上,我要做的是取一系列数字(窗口顶部和窗口顶部之间的所有像素+它的高度)并将其与另一个数字范围(对象的偏移量和偏移量)进行比较对象+它的高度)并查看是否有相同的数字.

我如何在已经拥挤的16ms内完成这项工作？

我做了一个旋转木马脚本,可以淡出,滑动或同时作为过渡.这可以通过更改父容器的类名来设置(#moduleCarousel_12).

[小提琴:http://jsfiddle.net/6jx8ufwg/11/ ]

在Chrome中,这很好用.

然而,在Safari(for Win)中:

1. 如果父级在类名中也有"向左滑动",则淡入淡出仅起作用.这很奇怪,因为它只添加了第二个动画(左定位).

   .moduleCarousel.fade > div.active {
       z-index: 3;
       opacity: 1;
       -webkit-animation-name: fade;
       animation-name: fade;
   }
   .moduleCarousel.slide.left.fade > div.active {
       -webkit-animation-name: slide-left, fade;
       animation-name: slide-left, fade;
   }
   
   /* Chrome, Safari, Opera */
   @-webkit-keyframes fade {
       0% {opacity: 0; -moz-opacity: 0;}
       100% {opacity: 1; -moz-opacity: 1;}
   }
   /* Standard syntax */
   @keyframes fade {
       0% {opacity: 0; -moz-opacity: 0;}
       100% {opacity: 1; -moz-opacity: 1;}
   }
   
   @-webkit-keyframes slide-left {
       0% {left: 100%;}
       100% {left: 0%;} …

   Run Code Online (Sandbox Code Playgroud)

嘿,我在你的网站上显示了很多商业图标.我想添加与它们相关的炫酷动画.我认为图标会保持灰色,直到你将它们悬停.然后他们慢慢变色.首先,我做了这个效果filter: grayscale(100%).但是这些图标有不同的灰色阴影,看起来很糟糕.然后我找到了一个svg过滤器,如下所示.不幸的是,我不知道如何为此过滤器设置过渡效果的动画.所以我正在寻找帮助来使这个动画工作或以另一种方式来实现这样的效果.

img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
  transition: filter 2s;
  -webkit-transition: filter 2s;
}
img:hover {
  -webkit-filter: none;
  filter: none;
}

<svg style="position: absolute; width: 140px; height: 140px;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="luminanceToAlpha" result="L2A"></feColorMatrix>
      <feFlood flood-color="#b3b4bd" result="colorfield"></feFlood>
      <feBlend mode="multiply" in="L2A" in2="colorfield"></feBlend>
      <feComposite operator="in" in2="SourceGraphic"></feComposite>
    </filter>
  </defs>
</svg>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

在网页中,有没有办法做一个目标对象上的CSS3动画微光,就像一个DIV,A标签,或者BUTTON,使用关键帧？我更关注当前的浏览器,而不是IE11版本之前的浏览器.

一个闪光动画将一个闪亮的条形物放置在一个角度,穿过物体并沿特定方向移动.它有助于引起对页面上某些内容的注意.这非常适合在线广告中的目标网页,以吸引客户点击购买.

在这种情况下,HTML目标对象将像页面加载时一样显示.但是,几秒钟之后,它会从您希望应用此效果的元素的可见溢出边界外的隐藏空间中向左移动,并向右移动直到它溢出HTML目标对象边界并离开边界,只是有延迟并再次出现.它可以位于目标对象的顶部,尽管我正在寻找的动画类型位于目标对象的背景中并且闪耀着明亮的白色.在目标物体背景上旅行时,它应该是快速的,使其持续1秒或1.5秒.

简单的div显示速度表;

 <div class="outer">
   <div class="needle" ></div>
 </div>

在悬停时,车速表的动画效果很好;

.outer:hover .needle {
  transform: rotate(313deg); 
  transform-origin: center center;
}

我需要这个在页面加载动画,因此我尝试将类名称.outer:hover .needle改为,.animateNow并使用以下jquery将其添加到.circle;

$(document).ready(function() {
  $('.outer').addClass('animateNow');
});

那没用,有什么想法吗？

完整的CSS;

@charset "utf-8";
/* CSS Document */

body {
    background-color: black;
}

.outer {
  position: relative;
  /*display: inline-block;*/
    height:100vw;
    width: 100%;
  background-image: url(../CentreDial3.png);
    background-size: cover;
  border-radius: 50%;
}
.needle {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transition: all 3s ease-in;

}
.needle:before {

  left: …