示例示例CSS3动画属性是CSS3中提供的一种强大的动画效果,可以让元素在页面上运动。它们包括。该属性用于定义一个动画,它有四个子属性:name。timing-和delay。
CSS3动画属性是CSS3中提供的一种强大的动画效果,可以让元素在页面上运动。它们包括:
1. animation:该属性用于定义一个动画,它有四个子属性:name,duration,timing-function和delay。
代码示例:
div {
animation: myAnimation 5s linear 1s infinite;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
2. animation-delay:该属性用于控制动画开始之前的延迟时间。
代码示例:
div {
animation: myAnimation 5s linear;
animation-delay: 3s;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
3. animation-direction:该属性用于控制动画是否反向播放。
代码示例:
div {
animation: myAnimation 5s linear;
animation-direction: alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
4. animation-duration:该属性用于控制动画的持续时间。
代码示例:
div {
animation: myAnimation 10s linear;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
5. animation-iteration-count:该属性用于控制动画的重复次数。
代码示例:
div {
animation: myAnimation 5s linear;
animation-iteration-count: 3;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
6. animation-name:该属性用于指定要使用的动画名称。
代码示例:
div {
animation: myAnimation 5s linear;
}
@keyframes myAnimation {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
7. animation-play-state:该属性用于
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(31条)