css3变化，动画

作者: 209bd3bc6844 | 来源:发表于2017-10-24 10:45 被阅读0次

CSS3动画效果总结
网页高级知识点（三）
CSS3过渡和动画
css3变化，动画
CSS3 3D翻转动画
07day
08_dayCSS动画
CSS3 动画
CSS3 动画
css3动画

css3可以实现一些动画过渡之类的。先来研究下api

2D变化

css3提供可以更改元素的css方法，我们可以移动，比例化，反过来，旋转，和拉伸元素。
属性： transform
transform就和width和height之类的属性是一样的。
属性值可能为：

translate() 移动
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate() 旋转
给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 缩放
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3); /* 标准语法 */
skew() 倾斜
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
*. skewX(<angle>);表示只在X轴(水平方向)倾斜。
*. skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

属性transform-origin
默认值： 50% 50% 0 表示变化的中心 2d变化前两个参数代表x和y，3d变换第三个参数代表z轴。

但是仅仅在css中加上以上属性，元素是不会动的。是静态的。需要配合过渡属性transition
属性： transition
我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
*. 指定要添加效果的CSS属性
*. 指定效果的持续时间。

div
{
    transition: width 2s; // div的长度有变化是，过渡效果生效，过渡时间为2秒
    -webkit-transition: width 2s; /* Safari */
}

transition: width 1s linear 2s; 或者transition: transform1s linear 2s;
第三个参数：规定过渡效果的时间曲线。默认是 "ease"。
第四个参数：规定过渡效果何时开始。默认是 0。
这样就可以实现简易的动画了。要是我们想实现的动画不仅仅是伸缩，平移之类的怎么办，或者我们平移完成后还想伸缩呢，transform提供的只能说一种变化，复杂的变化需要提前规定好动画的规则？css3也提供了动画api@keyframes和animation
属性： @keyframes
@keyframes规定动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 @keyframes内部也可以规定transform为变化内容。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

当在 @keyframes 创建动画，必须把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
*. 规定动画的名称
*. 规定动画的时长

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

属性：animation
规定动画的时间，运动曲线，何时开始之类的。和transition相同的效果。

遇到的问题

一个div ，目标实现：先沿着X轴旋转180°再沿着Y轴旋转180°。
效果如下

于是我就这么写

@keyframes demo1run {
    0% {transform: rotateX(0deg) }
    50% {transform: rotateX(180deg) }
    100% {transform: rotateY(180deg) }
  
}

!想着先X轴变化了180°后。再Y轴变化180°。但这么写的结果如下。

奇怪怎么成了先X轴变化了180°后。再Z轴变化180°了呢？？
因为这么写的话。从50%到100%的变化为 rotateX 180- 0deg, rotateY 0deg - 180 .此时表现的动画相当于rotateZ（180deg）。旋转变换所以修改成

@keyframes demo1run {
    0% {transform: rotateX(0deg) }
    50% {transform: rotateX(180deg) }
    100% {transform:  rotateX(180deg) rotateY(180deg) } // 加上X轴的变化。证明这个过程不要变化X轴
  
}