transition, transform, animation

前置知识

`a`标签的伪类选择器

a标签存在多个状态, 默认是蓝色, 长按是红色, 访问后是紫色

a标签的伪类选择器就是用来修改a标签不同状态的样式的

最佳实践:

在设置完a标签的样式后再设置该标签伪类选择器的样式
a是行元素, 转为块元素后其宽高等都放在标签选择器而非伪类选择器中来设置
文字和背景都放在伪类选择器中来使用

a:link{ /* 修改默认样式用的,其余的都能见名知意 */
    background-color: ;
    color: ;
    text-decoration: ;
}
a:visited{
    color: ;
}
a:hover{
    color: ;
    background-color: ;
}
a:active{
    color: ;
}
/* 如上, 有四种状态样式, 都可以自定义, 可省略, 但出现时要严格按照顺序设置, 否则可能不生效 */
/* love, hate 原则: link, visited, hover, active 必须依次出现 */

/* 如果默认和已访问颜色相同, 可简写为如下形式 */
a{
    color: ;
}
a:hover{
    color: ;
    background-color: ;
}
a:active{
    color: ;
}
/* 但是如果默认和已访问有专门设置, a 这种简写格式是不能替代 hover 和 active 的 */

补充

注意到:

同一个选择器内(99-反转菜单那里关于这点有惊喜), 属性名相同会出现后面出现的覆盖前面出现的同名属性的情况
对同一个选择器用同族属性的连写形式时各值之间用空格而非逗号隔开
opacity 在做动画效果时常用, 动画里用 display: none; 和 display: block; 不合适

过渡

过渡三要素:

发生过渡效果的属性
过渡前后状态有不同, 一般结合 :hover 伪类选择器设置后状态
过渡效果持续时间

transiton 属性族

这个族是设置在动画前的那个样式里面的 :hover 伪类选择器不仅可以用于a标签, 还可以用于所有标签, 但行元素在转为块元素或者脱标之前不能设置宽高. :hover 伪类选择器可以改变相应元素样式, 但没有过渡, 此时 CSS3 过渡模块派上用场

也就是说: property 和 duration 是一定要有的, 速度变化方式和延迟启动是可以没有的

/* 过渡模块的四个属性 */

selector{ /* 这里面设置的是前状态样式 */
    /* 告诉系统哪个属性需要执行过渡效果,一般是宽高 */
	transition-property: property1(,property2)(,property3)(...可以有多个);
    /* 告诉系统过渡效果持续的时长 */
    transition-duration: propertyDurationTime1(,propertyDurationTime2)											 (,propertyDurationTime3)
						 (...可以有多个, 与 transition-property 值一一对应);
	/* 告诉系统过渡动画的运动的速度变化方式 */
    /* 可选属性, 取值可以是 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) */
    transition-timing-function: ;
    /* 可选属性, 告诉系统延迟多少秒之后才开始过渡动画 */
    transition-delay: delayTime;
}

/* 过渡模块的连写 */
selector{
    transition: property1 duration1 (timing-function1) (delay1)
				(,property2 durationTime2 (timing-function2) (delay2))
        		(...可以有多个);
}
/* 代码短布局就难以精细 */
selector{
    transition: all duration;
}

写过渡的最佳实践

不要管过渡, 先编写基本界面
修改我们认为需要修改的属性
再回过头去给被修改属性的那个元素添加过渡即可

转换

2D 转换

旋转
平移
缩放

注意: 2D 转换模块会修改元素的坐标系

transform 属性各值

这个属性让人不适应的地方在于属性值还要取值. 不过这并不是 transform 属性独有, transition-duration 属性的 cubic-bezier(n,n,n,n) 属性值也是要取值的

/* 分开写的样子 */

selector{
	transform: rotate( deg); /* deg 是单位, 意思是 degree, 前面要有数值 */
    transform: translate( px, px); /* 两个值, 单位是 px, 分别指定水平和竖直方向移动距离 */
    /* 两个值,没有单位, 值默认为 1, 分别指定水平和垂直方向拉伸倍数, 简写一个则是同时指定水平和竖直方向 */
    transform: scale( , );
}

/* 连写 */

selector{
	transform: rotate( deg) translate( px, px) scale( , )  
}

selector{
	transform: none; /* 清除过渡 */
}

/* transform-origin 属性, 设置形变中心点 */ 

/*
默认情况下所有元素的旋转都是以自己的中心点为参考来进行旋转的,
可以通过 transform-origin 来修改对应元素的参考点
*/

selector{
    transform-origin: px px; 
    /* 
    两个值,取 0 和 0 即从左上角开始 
    取值有三种形式: 具体像素, 百分比, 特殊关键字(left center right, 这种用的多)
    */
}
/* 更改形变中心点对旋转, 平移和缩放都有影响, 但实际开发中考虑最多的还是对旋转的影响 */

/* 旋转轴向 */

selector{
	transform: rotateZ( deg); /* 默认是这个,deg 是单位, 意思是 degree, 前面要有数值 */
}
selector{
	transform: rotateX( deg);
}
selector{
	transform: rotateX( deg);
}

透视属性

透视属性结合 transform: rotateX( deg); 或者 transform: rotateX( deg); 就会呈现近大远小的效果

/*
perspective 属性的取值单位是 px,
意思是在离屏幕多远的地方观察这个被旋转的元素,
距离越近效果越明显,
这个属性要放到需要呈现近大远小效果的元素的父元素或祖先元素选择器内,
一般取 500px 是比较合适的
*/

selector{
	transform: rotateZ( deg); /* 默认是这个,deg 是单位, 意思是 degree, 前面要有数值 */
    perspective: ;
}
selector{
	transform: rotateX( deg);
    perspective: ;
}
selector{
	transform: rotateX( deg);
    perspective: ;
}

3D 转换

3D 相比 2D 多了个厚度.

想看到某元素的 3D 效果, 只需要给他的父元素添加属性键值对 transform-style: preserve-3d;

父元素设置 transform-style: preserve-3d; 子元素通过 transform: rotate translate scale; 一通操作, 可以做出丑丑的很简单的 3D 块块

动画

动画三要素:

发生动画效果的属性
动画前后状态有不同
动画效果持续时间

动画三状态:

执行前
执行时
执行后

过渡其实也算动画, 不过跟这里的动画有点区别: 过渡动画需要人为出发, 比如 hover, 而动画加载即执行

animation 属性族

核心属性

/* 这一整套结合起来才能完成一组动画效果, 三要素一个都不能少 */

selector{
    animation-name: xxx; /* 自定义这个动画的名字 */
    animation-duration: ; /* 指定动画完成耗时, 单位是 s */
}
@keyframes xxx{
    from{
        propertyName: propertyValue;
    }
    to{
        propertyName: propertyValue;
    }
}

可选属性

/* 其它可选属性 */

selector{
    animation-name: xxx;
    animation-duration: ;
    
    /* 可选属性 */
    animation-delay: ; /* 指定延迟启动的时长, 单位是 s */
    animation-iteration-time: ; /* 指定动画播放次数, 默认是 1, 没有单位, 可以是 infinity */
    /* 告诉系统过渡动画的运动的速度变化方式 */
    /* 取值可以是 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) */
    animation-timing-function: ;
    animation-direction: ; /* 值为 normal 或 alternate, 作用见名知意 */
}
@keyframes xxx{ /* 这是只有初始和结束两帧的极简版本 */
    from{
        propertyName: propertyValue;
    }
    to{
        propertyName: propertyValue;
    }
} 

/* 值为 running 和 paused, 作用见名知意, 这个一般放在 hover 伪类选择器里 */
selector:hover{
    animation-state: ;
}

进阶

虽然很炫酷, 但是企业开发里用的少

selector{
    animation-name: xxx; /* 自定义这个动画的名字 */
    animation-duration: ; /* 指定动画完成耗时, 单位是 s */
    
    /* 特殊的可选属性, 这个属性要和多帧(不只有 from 和 to 的称为多帧)动画结合使用才合理 */
    animation-fill-mode: ;
    /*
    值可以是:
    none 默认取值即为 none
    forwards 意思是取最后一帧为结束状态 
    backwards 意思是取第一帧为执行前状态
    both 意思是取第一帧为执行前状态, 取最后一帧为结束状态 
    */
}
@keyframes xxx{ /* 百分比表示阶段, 数值可自定义 */
    0%{ /* 称为第一帧 */
        propertyName: propertyValue; /* 这里完全可以用 transform 属性 */
    }
    25%{
        propertyName: propertyValue;
    }
    50%{
        propertyName: propertyValue;
    }
    75%{
        propertyName: propertyValue;
    }
    100%{ /* 称为最后一帧 */
        propertyName: propertyValue;
    }
}

连写

selector{
    /*
    依次是
		动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
    注意: 只有动画名字, 动画持续时长和动画内容是必须有的
    */
    animation: animation-name animation-duration (animation-timing-function) 
        (animation-delay) (animation-iteration-time) (animation-derection) (animation-fill-mode);
}
@keyframes xxx{
    from{
        propertyName: propertyValue;
    }
    to{
        propertyName: propertyValue;
    }

动画属性注意点:

动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面 (不这样的话效果会很魔幻)