关于CSS的写法，怎样来写的？ 5
---------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{animation:change 2s ease-in infinite;}
@keyframes change{50%{color:#fff}100%{color:#000}}
</style>
</head>
<body>
<table>
<td class="box">123</td>
</table>
</body>
</html>
第二种写法：CSS效果失效
-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<td style="animation:change 2s ease-in infinite;@keyframes change:50%color:#fff;100%color:#000">123</td>
</table>
</body>
</html>
--------------------------------------------------------------
要使用第二种写法，怎样修改？有替代方法（要第二种写法） 展开
这是我以前学习时候的笔记部分，分享给你
（1）内部样式表（嵌套到页面中）
内部样式表，写在<head></head>标签中
<style type="text/css">
div{
width :600px;
height:300px;
background:orange;
}
</style>
（2）内联样式（行间样式，行内样式，嵌入式样式）==>很少使用
<标签 style="属性:属性值; 属性:属性值;"></标签>
例如：<div style="width: 100px;height: 200px;background: orange;"></div>
（3）引用外部样式表文件
1）<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
rel="stylesheet"作用：建立关联性
type定义某种类型(H5中type可省略)
href导入css文件路径
注：一个HTML文件可以导入多个CSS外部样式表
2）@import url(CSS文件路径以及文件全称);
link和import导入外部样式的区别：
差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
这是一种CSS提供的外部引入方式，低版本浏览器不支持。
（4）对比：
<1>权重关系：
内联样式表的优先级(权重)最高
内部样式表和外部样式表的权重和书写先后顺序有关(哪个放在下面哪个的权重比较高)
注：权重高属性的会覆盖权重低的属性
覆盖的只是相同的属性，不同的属性会继续执行（即CSS的层叠性）
<2>作用域：
内联作用域是最小的：只针对于当前的标签
@keyframes xxx{
50%{color:#fff}
100%{color:#000}
}
试了一下你的代码，两种都是可以运行的，看看是不是你哪里的代码影响到了
