When using [WeChat Developer Tools] to develop WeChat applets, it is found that the animation effect cannot be displayed in the developer tools.
But the animation effect can be displayed normally in the real machine debugging
[About how to use animation.css in the WeChat applet, refer to the blog of using animation.css_THE WHY in the WeChat applet - CSDN blog ]
At the same time, I found that clicking each animation on the official website does not show the animation effect, and the following tips are given:
Hey! It seems that you have animations disabled on your OS, turning Animate.css off.
Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.
It mentions a CSS property called:prefers-reduced-motion
So go online to view related documents:
prefers-reduced-motion - CSS: Cascading Style Sheets | MDN
Simply put, it is used to detect whether the user's system has turned on the animation weakening function
Next, look at how to use this attribute:
Then the value of this attribute:
no-preferenceIndicates that the user has not made any settings
reduceIndicates that the user has modified the system settings to remove some unnecessary animation effects
Then look down to see reducethe usage of this parameter:
Note that in the Windows 10 system, but when we modify the setting of [Display animation in Windows] in [Settings], this property will take effect
At the same time, I noticed that the guess in the prompt information may have disabled animation effects in the computer operating system; ( It seems that you have animations disabled on your OS )
And we look at the source code of animation.css:
The value of this property was found to bereduce
So far, the positioning of the problem is basically clear
Then open [Settings] and search for [Animation]
Open [Show animations in Windows]
It was found that the function of displaying animations in Windows was turned off
Then we can enable this function;
You will find that the animation effect is normal