It's difficult to provide an answer without seeing your code, but from what you've described, it seems like the issue might be related to the transform property being overwritten in the animation.
Here is a simple example:
<div class="triangle"></div>
.triangle {
border: 20px transparent solid;
border-right-color: red;
display: inline-block;
animation-name: example;
animation-duration: 1s;
transform: rotate(45deg);
animation-fill-mode: forwards;
}
@keyframes example {
from {
transform: translate(0px, 0px) rotate(45deg);
}
to {
transform: translate(1000px, 0px) rotate(45deg);
}
}
[EDIT] I have some suggestions after reviewing the provided code.
It appears that you are declaring the transform property multiple times for the same element. In CSS, the last declaration always takes precedence over previous ones. To resolve this issue, consider one of the following solutions:
- Restructure your HTML and CSS as shown below:
<div class="triangle topleft green column7 row2"></div>
Can be changed to:
<div class="triangle-holder topleft column7 row2">
<div class="triangle green"></div>
</div>
This approach allows you to have different transforms on separate elements without conflicts. The transform: rotate() applies to the .triangle class, while transform: translate() applies to the .triangle-holder.
Eliminate the use of transform: rotate() altogether by utilizing borders for triangular shapes (refer to the earlier example). This method works well for 90-degree rotations only.
Avoid using transform: translate() and opt for margin or top/left properties for positioning instead.
Animate each triangle uniquely to consolidate transforms into a single transformation.
I recommend the second option as it involves minimal modifications to your existing code and is widely supported across browsers for creating CSS triangles.