标签：支持 功能 opera 没有 fun ram lex 倾斜 position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1 {
margin: auto;
width: 40px;
height: 250px;
transform-origin: bottom;
/*-ms-transform: rotate(60deg); /*IE9*/
/*-moz-transform: rotate(60deg); /*Firfox*/*/
/*-webkit-transform: rotate(60deg); /*Safari和Chrome*/*/
/*-o-transform: rotate(60deg); /*Opera*/*/
}
@-moz-keyframes keyframesname{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes keyframesname{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-ms-keyframes keyframesname{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes keyframesname{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.d1{
-webkit-animation-name: keyframesname;
-webkit-animation-duration: 800ms;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
.d2 {
width: 40px;
height: 180px;
background-color: #646464;
position: relative;
top: 0px;
left: 0px;
}
.d3 {
width: 40px;
height: 70px;
position: relative;
top: 180px;
left: 0px;
}
.dd1{
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s linear;
}
.dd1:hover{
background-color: red;
}
</style>
</head>
<body>
<h2>Animation</h2>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
<h2>transition</h2>
<div class="dd1">
</div>
<p>旋转rotate(deg)：表示的是顺时针旋转，deg是CSS3中的角度单位</p>
<p>放大scale(值)：它的值指定的是缩放倍率， 比如0.5就是整体缩放到50%</p>
<p>放大scale(x, y)：它的值指定的是对应坐标值缩放倍率，x是宽，y是高</p>
<p>放大scaleX(值)：它的值指定的是对应X缩放倍率</p>
<p>放大scaleY(值)：它的值指定的是对应Y缩放倍率</p>
<p>倾斜skew(值)：它的值指定的是一定的扭曲角度</p>
<p>倾斜skew(x, y)：使元素同时在水平和垂直方向扭曲</p>
<p>倾斜skewX(值)：仅是元素在水平方向扭曲变形</p>
<p>倾斜skewY(值)：仅是元素在垂直方向扭曲变形</p>
<p>移动translate(值)，它的值是指定移动的距离</p>
<p>移动translate(x,y)，水平和垂直方向同时移动</p>
<p>移动translateX(x), 仅水平方向移动</p>
<p>移动translateY(y), 仅垂直方向移动</p>
<p>对一个元素使用多种变形方法 transform: 方法一 方法二 方法三 ...</p>
<p>改变元素的基点transform-origin</p>
<h2>transition </h2>
<h2>
在CSS3中，如果使用动画可以使网页上文字或者图像具有动画效果，可以使背景颜色从一种颜色平滑过渡到另外一中颜色
<br />Transition功能支持从一个属性平滑到另外一个属性。
</h2>
Transition语法：
<pre>
transition: property duration timing-function delay;
1·执行变换的属性：transition-property; 属性规定应用过度效果的CSS属性的名称。
值：
A·none 没有属性会获得过度效果。
B·all 所有属性都将获得过度效果。
C·property 定义应用过度效果的CSS属性名称列表，列表以逗号分割。
2·变换延续的时间：transition-duration;
规定完成过度效果需要花费的时间（以秒或毫秒计），默认值0没有效果。
3·在延续时间段，变换的速率变化 : transition-timing-function;
值：（贝塞尔曲线）
A·ease：逐渐变慢，默认值，贝塞尔曲线(0.25,0.1,0.25,1.0).
B·linear: 匀速，贝塞尔曲线(0.0,0.0,1.0,1.0).
C·ease-in: 加速，贝塞尔曲线(0.42,0,1.0,1.0).
D·ease-out: 减速，贝塞尔曲线(0,0,0.58,1.0).
E·ease-in-out: 加速后减速，贝塞尔曲线(0.42,0,0.58,1.0).
F·cubic-bezier(x,x,x,x)在cubic-bezier函数中定义自己的值。一般是0-1之间的数值。
4·变换延迟时间：transition-delay;
说明：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行
列： transition-delay：10s;
transition-delay：10000ms;
单位为s(秒)或ms(毫秒)
</pre>
<br />
<br />
<h2>
使用transition和Animation的区别
</h2>
<pre>
transition和Animation的区别在于，transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行平滑过渡
的方式来实现动画效果，所以transition不能实现复杂的动画效果，而Animation功能是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画效果。
</pre>
：
<br />
<h2>Animation 功能支持通过关键帧的指定来在页面上产生更复杂的动画效果</h2>
<h3>Animation的使用方法：</h3>
<pre>
@-moz-keyframes 关键帧合集名称{
form{},
to{}
}
关键帧创建好了之后，还要在元素的样式中使用该关键帧。
方法如下：
选择器 {
-webkit-animation-name: 关键帧合集名称;
-webkit-animation-duration: 动画执行时间;
-webkit-animation-timing-function: 实现动画方法(贝塞尔曲线);
-webkit-animation-iteration-count：动画播放的次数(infinite 是无限循环播放);
}
</pre>
</body>
</html>
标签：支持 功能 opera 没有 fun ram lex 倾斜 position
原文地址：https://www.cnblogs.com/hello-dummy/p/9058523.html
