css3动画animation属性大全(css3动画animation用法)
CSS3动画就是通过CSS3代码搭建的网页动画。允许设计师和开发人员，通过编辑网站的CSS3代码添加简单的页面动画。可实现HTML元素的动画效果，从一种样式逐渐变化为另一种样式的效果，本文章介绍css3动画animation属性大全和css3动画animation用法。
一、css3动画animation属性大全：
1、animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义；
2、animation-duration: 整个动画需要的时长；
3、animation-timing-function: 动画进行中的时速控制，比如 ease或 linear；
4、animation-timing-delay: 动画延迟时间；
5、animation-direction: 动画重复执行时运动的方向；
6、animation-iteration-count: 动画循环执行次数；
7、animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态；
8、animation-play-state: 暂停/启动动画。
二、css3动画animation用法,请看下面这个例子：
HTML代码：
css代码：
.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-deLay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-coLor: yellow;
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
THE END
二维码
打赏
共有 0 条评论