标签: css-animations

我正在opacity: 0;CSS 中设置的一些元素上运行动画.动画类应用于onClick,并且使用关键帧,它将不透明度更改0为1(以及其他内容).

不幸的是,当动画结束时,元素将返回opacity: 0(在Firefox和Chrome中).我的自然思维是动画元素保持最终状态,覆盖其原始属性.这不是真的吗？如果没有,我怎样才能让元素这样做？

代码(不包括前缀版本):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

目前,我有这个代码:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

它闪烁,但它只在"一个方向"闪烁.我的意思是,它只会淡出,然后它会显示opacity: 1.0出来,然后再次淡出,再次出现,等等......我希望它淡出,然后再次从这个淡入淡出"提升" opacity: 1.0.那可能吗？

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？

这是我想要的,但在页面加载:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 transition-delay,一种延迟元素影响的方法.仅适用于悬停.
• CSS3关键帧,在加载时工作,但速度极慢.因此没用.
• CSS3过渡速度足够快,但不会在页面加载时设置动画.

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下.

但是,它一旦播放就会回到原来的状态.任何人都知道如何在最后一个css帧(100%)上停止它,或者如何摆脱它曾经玩过的整个div.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

我已经回顾了很多演示,并且不知道为什么我不能让CSS3旋转功能.我正在使用Chrome的最新稳定版本.

小提琴:http: //jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

<div></div>

我真的想让一段文字在不使用javascript或文本装饰的情况下使老式风格闪烁.

没有过渡,只有*闪烁*,*闪烁*,*闪烁*!

编辑:这与那个问题不同,因为我要求在没有连续转换的情况下闪烁,而其他问题的OP询问如何用连续转换替换闪烁

所以,我理解如何执行CSS3过渡和动画.什么不清楚,我用Google搜索,是什么时候使用哪个.

例如,如果我想让球反弹,很明显动画是要走的路.我可以提供关键帧,浏览器会做中间体帧,我会有一个很好的动画.

然而,存在可以以任一方式实现所述效果的情况.一个简单而常见的例子是实现facebook风格的滑动抽屉菜单:

这种效果可以通过如下过渡来实现:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

或者,通过这样的动画:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

使用HTML看起来像这样:

<div …

似乎Google Chrome最近有一次更新,导致文本模糊后出现问题transform: scale().具体来说,我这样做:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

如果您在Chrome中访问http://rourkery.com,则应在主文本区域看到问题.它不习惯这样做,它似乎没有影响其他webkit浏览器(如Safari).还有其他一些关于人们遇到类似3d变换问题的帖子,但是找不到像这样的2d变换.

任何想法将不胜感激,谢谢!

如何以不同的速度播放两个CSS动画？

• 图像应该同时旋转和增长.
• 旋转将每2秒循环一次.
• 增长将每4秒循环一次.

示例代码:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ - 只播放一个动画(最后一个动画).

我正在尝试使用省略号动画,并且想知道CSS动画是否可行......

所以它可能就像

Loading...
Loading..
Loading.
Loading...
Loading..

基本上就这样继续下去.有任何想法吗？

编辑:像这样:http://playground.magicrising.de/demo/ellipsis.html