和cool一起学前端----第七天

css3详解之animation

动画和过渡表现出来的状态基本差不多，但是过渡需要事件触发，上一节我们通过伪类hover触发的过渡效果，而动画就不需要事件触发，自己就动起来了，当然我们还是根据需求来制作我们需要的，那接下来就来讲讲动画。
animation:name 3s ease 1s infinite
animation第一个属性值name是动画的名称
animation第二个属性值3s是动画的时间
animation第三个属性值ease是动画执行的速度曲线，和transition一样
animation第四个属性值1s是动画延迟执行的时间
animation第五个属性值infinite是动画执行的次数，默认1次，infinite为无限次
除此之外我们还需要用@keyframes来规定动画，看代码

.box{ animation: donghua 3s ease 1s infinite; width: 100px; height: 100px; background: red}
@keyframes donghua{
    0%{ width: 400px}
    50%{ height: 300px;}
    100%{ background: purple}
}

看下执行效果

是不是很酷炫，发挥你的想象，你可以弄出来好多稀奇古怪有趣的样式，cool友情提示你，要多动手敲代码，不能老是看，要自己动手去实践，之后cool会和大家一起制作一些好玩的东西，大家创造了有趣的样式也记得和我分享，动画就说这么多了.

css补充

box-sizing

这个样式我是准备到布局的时候才会说，但是想想还是先说吧
box-sizing：content-box(默认值)/border-box
当设置为content-box时，此时容器的宽度=容器的width+容器的padding左右值
当设置为border-box时，此时容器的宽度=容器的width；padding值算在width里面了，来看代码

<div style="box-sizing: border-box;width: 100px; height: 100px; padding: 50px; background: chartreuse"></div>
<div style=" width: 100px; height: 100px; padding: 50px; background: brown" class="box3"></div>

outline

这个是容器的轮廓，尤其是表单元素选中的时候表现最为明显，通常都会设置这个样式为none,因为实在是影响用户体验

这个是未聚焦的input输入框，下面这张是聚焦的

很明显的看到有一个蓝色的轮廓，通常都会设置outline:none
好了，今天就分享到这，后续还能想起遗漏的我再补上，欢迎留言交流。