CSS3 анимация градиента фона - background-size: обложка не работает? - PullRequest
Новая
       32

CSS3 анимация градиента фона - background-size: обложка не работает?

2 голосов
/ 31 декабря 2011

Я довольно новичок в анимации CSS3, так что это сложная задача для меня. Я пытаюсь создать эффект отражения на верхней панели моего веб-сайта, чтобы пользователи знали о панели.

Так что я на самом деле хочу, чтобы отражение блуждало слева направо от бара довольно быстро и с ослаблением.

Хотя у меня две проблемы ... 1.) Я понятия не имею, почему этот ThinkG не будет работать с background-size:cover; или background-size:100% 100%? Это просто работает, когда я указываю ширину в пикселях, но я просто хочу, чтобы она всегда была на 100%, потому что сама полоса всегда на 100%.

2.) Понятия не имею, как я мог заставить эту вещь остановиться на 3 секунды. Таким образом, эффект отражения должен начаться при загрузке страницы, затем остановиться на 3 секунды и затем повториться.

Возможно ли это? 

<div class="masked">
    <span class="inner">
    This is some Text
    </span>
</div>

background: linear-gradient(-45deg,  rgba(85,85,85,1) 0%,rgba(85,85,85,1) 48%,rgba(255,255,255,1) 50%,rgba(85,85,85,1) 52%,rgba(85,85,85,1) 100%);
    background-size:1500px 20px;
    animation-name: masked-animation;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;

DEMO http://jsfiddle.net/7Akwf/

Может кто-нибудь, пожалуйста, помогите мне с этим?

1 Ответ

2 голосов
/ 31 декабря 2011

Чтобы анимация приостановилась на 3 секунды и продолжалась, сначала необходимо установить animation-iteration-count: infinite;, а затем использовать определение @keyframes для управления задержкой, используя процент в качестве паузы.

В демонстрации ниже я использую 0%-50% для полной анимации. Затем я использую %50-%100, чтобы сделать паузу.

Если вы хотите использовать background-size: 100% 100%;, вам нужно установить background-position: -2000px 0;, чтобы он полностью отсутствовал на левой стороне экрана, если вы хотите прокрутить анимацию. Вам также нужно настроить @keyframes, чтобы он полностью прокручивался с правой стороны, когда закончите. Из-за этого дополнительного расстояния вам необходимо соответствующим образом настроить продолжительность, чтобы получить эффект, который вы ищете.

Демо: http://jsfiddle.net/ThinkingStiff/jaRW3/

@keyframes masked-animation {
    0% {background-position: -2000px 0;}
    50% {background-position: 2000px 0;}
    100% {background-position: 2000px 0;}
}

Здесь я использую 6s длительность, из которых 50% будет пауза, а %50 будет анимация или 3 секунды каждая. Он также ждет 3 секунды, прежде чем начать. При этом используется сокращенный синтаксис, который экономит много места. 

animation: masked-animation 6s ease-in-out 3s infinite;
background-position: -2000px 0;
background-repeat: no-repeat;
background-size: 100% 100%;
...