IE浏览器动画中使用calc计算方法不生效的坑

最近在写一个动画效果时，在动画中利用calc去计算元素的移动距离，在火狐和谷歌chrome下运动正常，效果很简单：

示例代码如下：

<div id='moveDiv'>
	</div>
	
	<style>
		body{
			background-color:black;
		}
		#moveDiv{
			width:30px;
			height: 30px;
			background-color: yellow;
			animation:move 5s infinite;

		}
		@keyframes move{
			0%{
				transform: translate( calc(100% - 20px), calc(100% - 20px));
			}
			50%{
				transform: translate( calc(100% + 120px),calc(100% + 120px) );
			}
			100%{
				transform: translate( calc(100% - 20px),calc(100% - 20px) );
			}
		}
	</style>

在动画的keyframes帧中，使用到了calc方法去计算移动距离。目前效果很完美，but，打开IE浏览器尝试效果时，运动元素却傻傻的定在那里一动不动：

赶紧去查看了下transform和calc的浏览器兼容性：

transform:

calc浏览器支持：

    我用的IE11，浏览器兼容性没毛病啊。但是为毛动画中使用calc就不生效呢？

查了一些资料，有人说这是IE的一个bug。。。

解决方案：

曲线救国式的编码方式去实现想要的效果：

把上面的动画定义代码修改为;

@keyframes move{
	0%{
		transform: translate( 100%, 100%) translateX(-20px) translateY(-20px);
	}
	50%{
		transform: translate( 100%, 100%) translateX(120px) translateY(120px);
	}
	100%{
		transform: translate( 100%, 100%) translateX(-20px) translateY(-20px);
	}
}

即取消掉calc计算方法，利用translateX和translateY重新去定位偏移量；

效果达成：

    在此记录一下IE浏览器下的这个坑，遇到相同问题的小伙伴可以参考该解决方案。