[分享]css动画用什么关键字声明

CSS动画是网页制作中常见的一种效果，可以为网页增加动态感和美观性。在CSS中声明动画效果需要使用关键字keyframes。 / keyframes 关键字声明的语法 / keyframes anim...

CSS动画是网页制作中常见的一种效果，可以为网页增加动态感和美观性。在CSS中声明动画效果需要使用关键字@keyframes。

 /* @keyframes 关键字声明的语法 */
    @keyframes animation-name {  
        /* 动画过程中不同时间点的样式规则 */  
    } 

@keyframes后面的animation-name是用户自定义的动画名称，可以是任意名字。括号中则是定义动画在不同时间点的样式规则，也就是所谓的动画帧。

例如，我们可以用@keyframes声明一个从左到右渐变移动的动画效果：

 /* 定义动画名称为 "move" */
    @keyframes move {
        0% { 
            transform: translateX(-100px); /* 起始位置为左侧100px */
            opacity: 0; /* 不透明度为0，视觉上看不到 */
        } 
        100% { 
            transform: translateX(0); /* 终止位置靠左侧 */
            opacity: 1; /* 完全不透明 */
        }
    }

    /* 应用到需要应用 动画的元素上 */
    div {
        animation-name: move; /* 引用动画 move */
        animation-duration: 1s; /* 动画持续时间 1 秒 */
    } 

在以上代码中，我们定义了一个名为"move"的动画，从左侧100像素位置开始并在1秒内移动到正常位置，渐变为完全不透明。

除了@keyframes这个关键字，还有许多其他的CSS动画属性，例如animation-duration（动画持续时间）、animation-delay（动画延迟执行）和animation-iteration-count（动画的循环次数）等。

通过灵活运用这些属性，我们可以为网页添加更加丰富的动画效果。