css3动画

时间:2019-02-11
本文章向大家介绍css3动画,主要包括css3动画使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

css3动画: 过渡动画、平移动画、自定义动画(帧动画)
一、过渡动画transition
transition:all 1s linear;
transition-property: all;
transition-delay: 0s;
transition-duration: 1s;
transition-timing-function: linear;
二、平移动画transform
1.平移:translateX、translateY、translateZ

transform: translateX(100px)  translateY(100px) translateZ(100px);

2.旋转:rotatex、rotatey、rotatez

transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);

3.变形:skew

transform: skew(-45deg);

4.放大缩小:scale

transform: scale(1.2);

注:括号里的值大于1,为放大;小于1,为缩小
三、自定义动画animation
1.animation:动画名称 时间 运动方式 是否循环
动画名称:animation-name: mao;
动画的延迟时间:animation-delay: 1s;
动画的播放方向:animation-direction: alternate;
动画的播放时间:animation-duration: 3s;
动画的播放次数 infinite(循环):animation-iteration-count: 1;
动画是否播放暂停:animation-play-state: running;
动画的播放方式:animation-timing-function: linear;
例:

.block{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    aimation:mao 1s linear ;
   /* animation-fill-mode:forwards;*/
}

2.声明动画的播放序列
(1)定义:@keyframes mao { 写动画 }
注:mao为动画名称
(2)写法
法一:from{ transform: translatex(0px); } to{ transform: translatex(200px);}
法二:0%{} 60%{} 70%{} 90%{} 100%{}

上一页 下一页

原文地址:http://www.manongjc.com/article/51694.html