animation

animation 属性是一个简写属性，用于设置六个动画属性

animation-name :

属性为 @keyframes动画规定名称。

animation-duration :

规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function :

规定动画的速度曲线。
linear：匀速
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay :

规定在动画开始之前的延迟。

animation-iteration-count :

规定动画应该播放的次数。（n | infinite）

animation-direction :

规定是否应该轮流反向播放动画。
(normal:默认值。动画应该正常播放。 | alternate:动画应该轮流反向播放。)

animation: name duration timing-function delay iteration-count direction;animation: play    3s   linear    infinite

keyframes

keyframes 几种写法：

@keyframes play    {                          from{width:10%}to{width:100%}}
@keyframes play    {0%{width:10%}100%{width:100%}
}
@keyframes play    {0%{width:10%}20%{width:30%}100%{width:100%}}
@keyframes play    {0%{width:10%}20%{width:30%}30%{width:30%}40%{width:30%}50%{width:30%}100%{width:100%}
}
@keyframes play{                          from{transform:rotate(0);-ms-transform:rotate(0);    /* IE 9 */-moz-transform:rotate(0);     /* Firefox */-webkit-transform:rotate(0); /* Safari 和 Chrome */-o-transform:rotate(0);  /* Opera */}to{ transform:rotate(360deg);}
}

transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

常用的：translate，scale，rotate，skew

translate(x,y)，translateX(x)，translateY(y)，translate(x,y,z)，translateZ(z)

scale(x,y)，scaleX(x)，scaleY(y)，scaleZ(z)

rotate(angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)

skew(x-angle,y-angle)，skewX(angle)，skewY(angle)

@keyframes play{0%{  transform:translate(20px,30px)  }100%{  transform:translate(-20px,10px)   }
}
@keyframes play{0%{  transform:translate(20px,30px)   scale(.4)  }100%{  transform:translate(-20px,10px)    scale(1.2) }
}

transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。

语法：

transition: property duration timing-function delay;
div#ceshi{ transition:plays 4s linear;width:20px;color:red }
div#ceshi:hover{ width:100px,color:blue }

animation 详细讲解相关推荐

2.5万字详细讲解个人网站的开发过程和项目的部署
目录简介 1 技术介绍 1.1 个人博客功能 1.2 技术组合 1.3 工具与坏境 2 项目的环境配置 2.1 vue的环境配置 2.2 解决跨域问题 2.3 关于图标的获取 3 前端技术 3.1 ...
《Unity API常用方法和类详细讲解—Siki学院》课程学习笔记02
<Unity API常用方法和类详细讲解-Siki学院>课程学习笔记02 课时10 GameObject.Component和Object的千丝万缕的关系一个游戏由多个场景组成,一个场景 ...
Android架构详细讲解与C/C++开发支持原理
Android架构详细讲解与C/C++开发支持原理在Android 在NDK r5使用C/C++进行开发.(以前,Android 对C/C++开发的支持仅限于用C/C++开发动态链接库,然后在Jav ...
适合新手练手，用Python爬取OPGG里英雄联盟英雄胜率及选取率，详细讲解加注释（建议收藏练手）
今天来个简单的小项目,适合新手拿来练手,在OPGG上爬取英雄联盟里的法师,ADC,打野,辅助所有英雄的胜率及选取率,是不是感觉很高大上,但是却很简单,只要用三十多行代码就能实现,详细讲解每一行代码加注 ...
Python的零基础超详细讲解（第十三天）-Python的类与对象
基础篇往期文章如下: Python的零基础超详细讲解(第一天)-Python简介以及下载 Python的零基础超详细讲解(第二天)-Python的基础语法1 Python的零基础超详细讲解(第三天)- ...
Python的零基础超详细讲解(第十二天）-Python函数及使用
基础篇往期文章: Python的零基础超详细讲解(第一天)-Python简介以及下载_编程简单学的博客-CSDN博客 Python的零基础超详细讲解(第二天)-Python的基础语法1_编程简单学的博 ...
Python的零基础超详细讲解（第七天）-Python的数据的应用
往期文章 Python的零基础超详细讲解(第一天)-Python简介以及下载_编程简单学的博客-CSDN博客 Python的零基础超详细讲解(第二天)-Python的基础语法1_编程简单学的博客-CS ...
Python的零基础超详细讲解（第五天）-Python的运算符
往期文章 Python的零基础超详细讲解(第一天)-Python简介以及下载_编程简单学的博客-CSDN博客 Python的零基础超详细讲解(第二天)-Python的基础语法1_编程简单学的博客-CS ...
java异常详细讲解_Java异常处理机制的详细讲解和使用技巧
一起学习 1. 异常机制 1.1 异常机制是指当程序出现错误后,程序如何处理.具体来说,异常机制提供了程序退出的安全通道.当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器. 1.2 ...
未来网络发展的趋势——IPv6详细讲解与基本配置
实验目的: 1. 掌握IPv6的基本工作原理: 2. 区别IPv6和IPv4有什么区别: 3. 掌握IPv6的一些新的特征: 4. 掌握IPv6的发展进程和部署情况: 实验拓扑: 实验步骤: 一. ...

animation 详细讲解