经典属性玩转transition和animation

CSS3新增的属性
    transform（变形） translate（平移）（x，y） scale（缩放）(x,y) rotate（旋转）(x,y) skew(扭曲)(x,y)
    transform-origin（变形的中心点的位置）：x y    ；
    transtion（过度）：css属性 时间 过渡样式 延迟时间 property duration timing-function delay
        平移用的是像素 缩放用的是倍数
        translate    scale
        transform:第一个参数是相对于X轴 第二个参数是相对于Y轴
        transtion：all 800ms ease 5s
        transform：rotate（360deg）
            多数结合：hover使用
        
            animation(动画)
        transition需要出发一个事件（鼠标单击、鼠标放上去、获得焦点、被点击等）才能实现
        animation
            8个属性    name duration delay timing-function  delay iteration-count direction fill-mode
        
 
        先在css样式表加这个 imgScale就是你起的个名字
            @keyframes imgScale{
                0%{transform: scale(1);}
                50%{transform: scale(1.5);}
                100%{transform: scale(2.5);}
                }
        然后在想变的地方    
            animation:imgScale 0.5s ease  infinite alternate ;
                                    
alternate 从小变大 再从大变小    animation-play-state infinite 无限循环 fill-mode 动画的填充规则 （一般没啥效果）
 
        #a：target{
                background：red；
            }
        #img1：target{z-index：4；}
        #img1：not：（target）{z-index：3}
 
a href="#" target=_parent 在当前页面打开
        
        _blank 在另一个空白页打开