css3动画animation属性大全(css3动画animation用法)

 分类:css3知识时间:2022-03-28点击: 2022前端视频教程(自学必看)

CSS3动画就是通过CSS3代码搭建的网页动画。允许设计师和开发人员,通过编辑网站的CSS3代码添加简单的页面动画。可实现HTML元素的动画效果,从一种样式逐渐变化为另一种样式的效果,本文章介绍css3动画animation属性大全和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代码:

<div class="element"></div>

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;
 }


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: