css3中实现动画效果的属性是什么

介绍

CSS是一种用于给网页添加样式和布局的代码语言。从基础到高级，以下是这些属性中的一组，用于为CSS3中的动画效果创建关键帧动画和变换（transformation）。这些属性允许您控制要执行的动画类型，如缩放，旋转等，以及动画如何在时间轴上执行。

transform属性

定义

Transform属性中，可以设置旋转，缩放，移动，扭曲（skew）等。这些属性使用2D和3D坐标来移动元素。CSS3 Transitions的根本原因是将一个元素从一种样式转换为另一种样式，而不需要使用Flash等外部技术。

示例

div {
    transform: rotate(30deg);
}

此css代码表示将div元素向右旋转30度。

transition属性

定义

定义了某一个css属性变化时,该变化执行的时间、执行方式等属性。这使得css属性变化更加生动，而且更加人性化。

示例

div {
    background-color: cyan;
    transition: background-color 2s ease;
}
div:hover {
    background-color: red;
}

此css代码表示当鼠标悬停在div上时，div的背景色会慢慢由青色过渡到红色，过渡的时间是2s，在2s内过渡是平滑的(ease)。

animation属性

定义

animation属性是CSS3中另一种非常强大的CSS动画实现方式。animation属性可以把对象各种各样的动作制作成动画显示。你只需要设置好你所需要的动画，并分配给某个元素后，浏览器就会按照你的预定方式按序列显示动画效果。

示例

div {
    animation: myanimation 2s infinite;
}
@keyframes myanimation {
    to {
        transform:rotate(360deg);
    }
}

此css代码表示当代码开始执行时，div的元素以顺时针旋转360度，并在2秒内完成，然后将从开始的位置无限次地重复此操作(infinite)。

@keyframes属性

简介

@keyframes是定义一个动画，这个动画可以用在animation属性中，指定动画的执行过程，可以控制动画发生的时间，需要的动作，以及动画执行的曲线等。

示例

@keyframes move {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: 100px;
    }
    100% {
        margin-left: 200px;
    }
}
div {animation: move 1s forwards;}

此css代码表示，在1秒内，div元素将从左侧移动到右侧，从 @keyframes 属性设置的 0% 开始状态，变为 @keyframes 属性设置的 100% 完成状态。“forwards” 表示动画结束时，保持最后一帧的状态。

conclusion

CSS3提供了用于创建动画效果的属性transform、transition、animation、@keyframes。通过这些属性，可以为网页增加生动和多彩的动画效果，吸引用户的眼球，同时提高了网页的交互性。