некоторые анимации CSS3 объясняют

Question

Я искал в Интернете для анимации css3 анимации в своей концепции.

Я скачал несколько примеров из сети, и я не знаю, что произойдет, используя эту строку кодов.

#slider li.firstanimation { 
-moz-animation:cycleone 25s linear infinite;  
-webkit-animation:cycleone 25s linear infinite;  
} 

и это ...

@-webkit-keyframes cycleone { 
0% { top:0px; } 
4% { top:0px; } 
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; } 
21% { top:-325px; opacity:0; z-index:-1; } 
50% { top:-325px; opacity:0; z-index:-1; } 
92% { top:-325px; opacity:0; z-index:0; } 
96% { top:-325px; opacity:0; } 
100%{ top:0px; opacity:1; } 

может кто-нибудь объяснить строки (коды) особенно "@" вещь.

Answer 1

CSS3 анимации основаны на ключевых кадрах. Чтобы создать анимацию, вам необходимо создать набор правил CSS и обернуть их в идентификатор ключевого кадра @keyframes hello {rules here} и применить их к любому элементу dom, который вы хотите.

Когда вы присоединяете анимацию к элементу, вы также даете ей продолжительность, скажем, 10 секунд. В течение этих 10 секунд вы можете решить, когда инициируется каждое правило. Например,

@keyframes fade { 

0% { 
opacity: 1; 
} 
50% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 

}

Если вы должны были использовать эту анимацию на элемент в течение 10 секунд, например, так:

.myElement { 
    animation: fade 10s 1 
} 

Затем он начнет исчезать в 0 в течение 5 секунд потому что правило составляет половину 50%, а затем обратно через 5 секунд до 1, 10 секунд.

Это анимации на первый взгляд, если вы поняли основную концепцию, это время для вас, чтобы начать документировать себя более конкретно об этом, так как есть много учиться и слишком много, чтобы объяснить на StackOverflow :) Наслаждайтесь