文档章节

css animation动画

o
 osc_4nmshwhm
发布于 2018/08/06 23:31
字数 477
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

css 动画:

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果.

  1. 必要元素:

a、通过@keyframes指定动画序列;自动补间动画,确定两个点,系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧

 b、通过百分比将动画序列分割成多个节点;

 c、在各节点中分别定义各属性

 d、通过animation将动画应用于相应元素;

  1. animation样式常用属性:

a)     动画序列的名称:animation-name: move;

b)     动画的持续时间:animation-duration: 1s;

c)      动画的延时:animation-delay: 1s;

d)    播放状态:animation-play-state: paused|running;

e)     播放速度:animation-timing-function: linear;

f)      播放次数 反复:animation-iteration-count: 1;

g)     动画播放完结后的状态:animation-fill-mode: forwards;

h)     循环播放时,交叉动画:animation-direction: alternate;

代码说明:

<style>

    *{

        padding: 0;

        margin: 0;

    }

    div{

        width: 300px;

        height: 300px;

        margin:100px auto;

    }

    div > img{

        width:100%;

    }

    /*添加动画*/

    @keyframes rotateAni {

        0%{

            /*可以同时对多个属性添加动画效果*/

            transform: rotate(0deg) scale(1);

        }

        50%{

            transform: rotate(180deg) scale(2);

        }

        100%{

            transform: rotate(360deg) scale(1);

        }

    }

    div:hover > img{

        /*动画名称-自定义*/

        animation-name: rotateAni;

        /*动画时间*/

        animation-duration: 1s;

        /*动画速率曲线: linear:匀速  ease:动画以低速开始,然后加快,在结束前变慢  ease-in:动画以低速开始  ease-out:动画以低速结束  ease-in-out:动画以低速开始和结束*/

        animation-timing-function: linear;

        /*动画播放次数*/

        animation-iteration-count: 4;

        /*动画时间延迟*/

        animation-delay: 0s;

        /*动画播放完的状态:  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/

        animation-fill-mode: forwards;

        /*动画是否轮流反射播放:  alternate:在规定的次数内轮流反射播放  normal:正常播放*/

        /*animation-direction: alternate;*/

    }

    div:active >img{

        /*动画的当前播放状态:  paused:暂停  running:运行*/

        animation-play-state: paused;

    }

</style>

 

上一篇: css 2D动画
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Mysql高可用架构

低读低写并发、低数据量方案 方案一:双机高可用方案 1.数据库架构图 2.特点 一台机器A作为读写库,另一台B作为备份库;A库故障后B库作为读写库;A库恢复后A作为备库。 3.开发说明 此种情况下...

osc_2axit9df
2分钟前
0
0
ASP.NET Core Web Api之JWT刷新Token(三)

前言 如题,本节我们进入JWT最后一节内容,JWT本质上就是从身份认证服务器获取访问令牌,继而对于用户后续可访问受保护资源,但是关键问题是:访问令牌的生命周期到底设置成多久呢?见过一些...

osc_p1q9onsn
3分钟前
0
0
[PA2015]Siano 单调栈

由于某人找了个单调栈的题解但是没研究透所以让我们来研究。。。。。。。。。。。。 首先先来考虑下面一种情况,假设第\(k\)次切割时,天数为\(d_k\),高度为\(b_k\),第\(k+1\)次切割时,天...

osc_b71hj3or
4分钟前
0
0
reg007最新邀请码!!!

需要的小伙伴留邮箱我邀请你们。

osc_9na1lmr9
6分钟前
0
0
居家日常(第二周)

开个新坑,开个新坑。主要感觉都写在一篇博客里有亿点长。接下来的文笔会更精彩(大雾) 6.29 周一   开新坑啦!!!这周日记打算好好地写点东西出来。当我真正想坐下来写点东西的时候就很...

osc_kf7nv2km
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部