css动画（transition，translate，rotate，scale）

序言

为什么会用css动画呢
通过CSS3过渡，我们可以在不使用 Flash 动画或 JavaScript 的情况下，
使元素从一种样式变换为另一种样式时为元素添加效果。
css动画可以做很多特效，特点就是体积小，与js相比不需要操作DOM，下面正式讲解下常用对的css的动画属性。

transition

 规定应用过渡效果的属性名称  transition-property属性值为 指定的css属性名称，默认值为 all 全部，none 没有注：仅属性值为数值型或颜色的属性可以应用过渡效果，其他属性不行 transition-property: all;规定过渡效果完成所需要花费的时间--完成时间 transition-duration属性值以秒(s)或毫秒(ms)计，默认值为 0transition-duration: 5s; 规定过渡完成的时间曲线(速度曲线)  transition-timing-function:属性值：    ease 默认值,慢快慢        ease-in 慢开始         ease-out 慢结束ease-in-out 慢开始和慢结束         linear 匀速cubic-bezier(0,1.51,0,1.28); transition-timing-function: linear; 规定出发开始以后多久开始执行过渡效果---延时时间  transition-delay属性值以秒(s)或毫秒(ms)计，默认值为 0属性值可以规定负值，负值表示提前多少时间进入到过渡，会将前几秒错过 transition-delay: 2s;通过transition属性规定过渡的简写简写时属性值的顺序不分先后，但是针对时间，默认认为写在前的完成时间，后的为延时时间简写时某个值取默认值时可以省略不写，但是必须规定完成时间，只存在一个时间则默认为完成时间transition: all 5s linear 2s; transition: 2s linear 5s all; transition: 5s;

举个简单的例子

 #box {width: 500px;height: 400px;background: yellow;border: 20px solid orange;font: 30px/50px "";color: blue;transition:all 1s}
#box:hover {width: 800px;font: 50px/80px "";border-style: double;background: green;
}<div id="box">周杰伦不知道你还能不能坚持住，你感觉自己要坚持不住的时候，叫我，我来扛伤害，尤其有人勾引你的时候。</div>这段代码的含义为当鼠标经过div元素的时候 宽度变成800px 字体也变大了，背景也变了

transform

通过CSS3转换，能够对元素进行移动、缩放、转动、拉伸，转换是使元素改变形状、尺寸和位置的一种效果。
实现转换的属性是 transform

transform    针对元素进行 2D 或 3D 的转换位移：translate(x,y)      指定元素在x轴和y轴的位移第一个参数值表示在x轴(水平)上的位移值第二个参数值表示在y轴(垂直)上的位移值translateX(x)      指定元素在x轴的位移translatey(y)         指定元素在y轴的位移参数值：   length(数值+单位)      %(根据元素自身的宽高计算的百分比值)x轴位移，正值向右发生位置移动，负值向左发生位置移动y轴位移，正值向下发生位置移动，负值向上发生位置移动transform: translateX(100px) translateY(-50px);

rotate(?deg)         指定元素在平面上的旋转角度参数值： ?deg(+-?deg)角度值为 正值 元素 顺时针旋转角度值为 负值 元素 逆时针旋转

缩放：scale(x,y)             指定元素在x轴和y轴的缩放第一个参数值表示在x轴(水平)上的缩放值第二个参数值表示在y轴(垂直)上的缩放值可以给到一个参数值，此值表示x轴和y轴都按照此值放大或缩小scaleX(x)          指定元素在x轴的缩放scaleY(Y)             指定元素在y轴的缩放参数值：   数字，表示与元素原本大小的倍数值默认值为1，原本大小大于1的值都表示放大的倍数值小于1但是大于0表示的是缩小的倍数值为0，缩小到没有可以规定负值，表示的是反向放大缩小的倍数值

用得少

 拉伸(倾斜)：skew(x,y)             指定元素在x轴和y轴的拉伸倾斜第一个参数值表示在x轴(水平)上的拉伸值第二个参数值表示在y轴(垂直)上的拉伸值skewX(x)             指定元素在x轴的拉伸倾斜skewY(y)            指定元素在y轴的拉伸倾斜参数值： ?deg(+-?deg)x轴正值将元素的左上角和右下角沿着x轴拉伸角度使元素产生倾斜x轴负值将元素的右上角和左下角沿着x轴拉伸角度使元素产生倾斜y轴正值将元素的左上角和右下角沿着y轴拉伸角度使元素产生倾斜y轴负值将元素的右上角和左下角沿着y轴拉伸角度使元素产生倾斜

transform-origin     设置改变转换元素的中心点原点第一个属性值：x轴坐标点leftcenterrigthlength%第二个属性值：y轴坐标点topcenterbottomlength%

写动画的大概思路就是
1 写好初始状态
2 写好最终状态
3 写上需要过渡的属性+过渡时间+过渡的速度（匀速还是先快后慢还是先慢后快还有贝塞尔曲线）

举个例子吧
附上源代码（直接复制可运行）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html{height: 100%;}body{height: 100%;background: #ccc;display: flex;justify-content: space-around;align-items: center;}a{width: 150px;height: 150px;border: 10px groove #fff;border-radius: 50%;opacity: .3;position: relative;z-index: 10;}a:nth-of-type(1){background: url(./过去式/a1.jpg) no-repeat center;}a:nth-of-type(2){background: url(./过去式/b1.jpg) no-repeat center;}a:nth-of-type(3){background: url(./过去式/c1.jpg) no-repeat center;}a:nth-of-type(4){background: url(./过去式/d1.jpg) no-repeat center;}a:nth-of-type(5){background: url(./过去式/e1.jpg) no-repeat center;}a:hover{opacity: 1;}img{width: 100%;height: 100%;position: fixed;left: 0;top: 0;opacity: 0;transition: all 3s linear;}img:nth-of-type(1){/* top: -100%; */transform: translateY(-100%);}img:nth-of-type(1):target{opacity: 1;transform: translateY(0);}img:nth-of-type(2){/* left: -100%; */transform: translateX(-100%);}img:nth-of-type(2):target{opacity: 1;transform: translateX(0);}img:nth-of-type(3):target{opacity: 1;transform: rotate(360deg);}img:nth-of-type(4){transform: scale(.7);}img:nth-of-type(4):target{opacity: 1;transform: scale(1);}img:nth-of-type(5){transform: scale(1.4);}img:nth-of-type(5):target{opacity: 1;transform: scale(1);}</style></head><body><a href="#aaa"></a><a href="#bbb"></a><a href="#ccc"></a><a href="#ddd"></a><a href="#eee"></a><img src="./过去式/a.jpg" id="aaa"><img src="./过去式/b.jpg" id="bbb"><img src="./过去式/c.jpg" id="ccc"><img src="./过去式/d.jpg" id="ddd"><img src="./过去式/e.jpg" id="eee"></body>
</html>

使用到一个锚点链接 img的话随便在网上找几张就好了

css动画（transition，translate，rotate，scale）相关推荐

Android动画效果translate、scale、alpha、rotate详解
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
Android动画效果 translate、scale、alpha、rotate 切换Activity动画控件位置调整
2011.10.28注:如果需要控件停在动画后的位置,需要设置android:fillAfter属性为true,在set节点中.默认在动画结束后回到动画前位置.设置android:fillAfter后 ...
CSS 2D 转换 transform translate() rotate() scale() skew() matrix()
CSS transforms 属性允许移动.旋转.缩放和倾斜元素. translate() rotate() scaleX() scaleY() scale() skewX() skewY() sk ...
css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
Transform(CTM,Translate,Rotate,Scale)
前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...
android动画效果 translate,Android利用translate、scale、alpha、rotate实现动画效果
Android利用translate.scale.alpha.rotate实现动画效果在Android中可以用animation实现动画效果,Android中的animation由四种类型组成: a ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
Canvas之translate、scale、rotate、skew
id="BAIDU_DUP_fp_iframe" src="https://pos.baidu.com/wh/o.htm?ltr=" style="w ...

css动画（transition，translate，rotate，scale）

序言

transition

transform

css动画（transition，translate，rotate，scale）相关推荐

最新文章

热门文章