2018-11-27

transition: 动画属性的简写属性
border-top-left-radius: 左上角为圆角
border-top-right-radius:右上角为正圆圆角
border-radius: 40px;曲率半径为40的圆角矩形
border-radius: 20%; 上下左右%20都为圆角
border-radius: 50% 正圆
box-shadow: 10px水平偏移10px 垂直偏移10px 羽化大小 0px扩展大小 #bfa颜色
opacity: 0.3 透明度30%，文字也透明
background-color: rgba(255,215,0,0.3) 背景色变透明，文字不透明
border: 2px solid rgba(0,0,0,0.3) 边框透明

transition: all 1s linear 匀速
transition: all 1s ease 开始和结束慢速，中间加速
transition: all 1s ease-in 开始慢速，结尾突然停止
transition: all 1s ease-out 突然开始，结束时慢速
transition: all 1s ease-in-out 开始和结束时慢速
transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750) 贝塞尔（贝兹）曲线
transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435) 超出再缩回的弹性效果

position: absolute 定位使色块在图片正下方
间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小
变形
transform: translate(50px,50px) 位移
transform: rotate(360deg) 沿Z轴旋转360度
transform: scale(0.5,0.2) 缩放
transform: skew(45deg,0) 斜切

元素旋转
transform-style: preserve-3d 设置盒子按3D空间显示
transform: rotate(45deg) 默认沿Z轴旋转
transform: perspective(800px) rotateX(45deg) perspective设置透视距离，经验数值800比较符合人眼的透视效果

transform-origin: left center 设置变形的中心点
backface-visibility: hidden 设置盒子背面是否可见
transform: translateZ(10px) 初始文字浮起10像素方便查看图片与文字分层的效果
transform: perspective(800px) rotateY(180deg) 鼠标移入时图片翻为背面隐藏
transform: perspective(800px) rotateY(0deg) 鼠标移入时文字翻为正面显示
infinite 不限制次数
alternate 动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards 动画完成保持在最后一帧
backwards 在延迟时间内，在动画显示之前，应用from开始属性值
both 向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
animation: moving 1s ease 1s 5 alternate both

animation-play-state: paused 动画暂停
animation-play-state: running 动画运行
steps动画步数