标签: css-animations

我正在投资组合,以显示我申请下一份学习的时间.自从我们生活在2012年以来,它拥有大量精美的动画和CSS3垃圾,只是为了给他们"我们需要这个家伙"的感觉.我现在有点问题.

这只是特定元素的一小部分:

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

请注意,我省略了Firefox关键帧,因为它们完全相同.对,丑陋格式的CSS,使得id为'fadein'的元素...淡入.

问题是,动画结束后元素会再次消失.这将丑陋格式的Css变成无法使用的Css.

有没有人知道如何在动画后保留更改的样式？

我想之前已经问过这个问题,如果是这样的话,我很抱歉.

我现在遇到了一些利用CSS3关键帧式动画的网站,并决定在我自己的网站上测试它.然而,这让我陷入了一个难题:通常在我将CSS文件提交到网站之前,我将使用浏览器的检查器(Ctrl+Shift+I在Chrome,Opera和FF; F12在IE中)在本地调整和更改CSS以查看我的内容最喜欢.但是,似乎无法使用浏览器检查器更改CSS3动画的关键帧!这对我来说是一个极端的障碍,因为它每次我想要改变动画的任何细微差别时都会强制我提交一个CSS文件,这也会导致服务器延迟15分钟.有什么办法可以用浏览器检查器在本地更改CSS3动画关键帧吗？

我尝试为CSS动画关键帧设置这个LESS mixin:

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes "@name" {
    from {
      @from;  
    }
    to {
      @to;
    }
  }
}

但是名称解析存在一些问题,是否有任何选择可以做到这一点？

我想inherit用calc()这样的:

#foo {
  animation-duration: 10s;
}
#foo > .bar {
  animation-duration: calc(inherit + 2s); /* =12s */
}

但它似乎没有用.

是浏览器错误还是规格？

我正在尝试使用以下内容将动画暂停鼠标悬停:

.quote:nth-child(1):hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

但它不想暂停.谁能看到我做错了什么？

的jsfiddle

我如何判断(出于测试目的)是否已为CSS动画启用硬件加速？

我有以下代码,它基本上放大了一个元素并使其全屏(不使用HTML5全屏API).当使用jQuery动画时,它在大多数手机上像一只口吃的哮喘龟一样运行,所以我使用的是CSS3.

这是jsFiddle示例:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top …

我正在尝试学习HTML和CSS,但我遇到了一个问题:

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

我希望这个CSS循环,而不是只在它完成时停止.是否可以使CSS函数循环？

我试图实现如下动画效果:

显示横幅时,应显示下一横幅的右下角.当您单击此角落时,它应隐藏当前横幅并显示下一个横幅.

我目前的加价如下:

<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>

CSS如下:注意我曾经clip-path创建角落:

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

JS:

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active'); …

我有一些CSS3动画在所有支持CSS3的浏览器中都能完美运行,除了safari.怪不是吗？好的,这是我的代码:

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}
.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}



/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    0% { -moz-transform: rotate(0deg); }
    5% { -moz-transform: rotate(-14deg); …

我试图在没有Javascript的情况下在 onLoad上实现一些动画.JS很简单,CSS就是......不行.

我有div这应该是对display: none;,应该是display: block;后3个secondes.很多资源告诉我动画不起作用display,但应该与visibility(我经常在我的过渡中使用).

对,知道我有这个可怕的javascript函数:

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

我在CSS中尝试了一些动画但没有结果......似乎没有任何效果.

我的页面中有很少的动画,但只是display: none;在动画上挣扎.

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; } …